jQueryウォーターフォール絶対位置配置レイアウト(2)(画像のAJAX読み込み遅延)_jquery

ウォーターフォール フロー絶対配置レイアウトとフローティング レイアウトの違いは

1 です。レイアウトは異なります。
絶対配置: すべての絶対配置 LI を 1 つの UL に配置します。
フローティング レイアウト: 複数 (一般的に) 3 つまたは 4 つ) UL は LI を配布します。
2. AJAX は異なります
絶対位置指定: 要求された JSON データ (もちろん、他の形式のデータでも構いません) を UL に挿入します。次に、新しく挿入された LI に対して TOP と LEFT の設定を実行します。
フローティング配置: 要求された JSON データ (もちろん、他の形式のデータでも可能) をそれぞれ対応する UL に挿入します。これは、絶対位置指定があるためです。 LIの位置を設定する必要があります。自動的に下方向に配置されます。

1. 関数分析:

1. 各 LI の TOP 値と LEFT 値を設定します。 ;
2. AJAX データを LI に配置し、UL に挿入します。

1. LI の LEFT を設定します。 🎜> どの列ですか?列数と各 LI の幅を掛け合わせて、LEFT 値を決定できます。 パターンを見つけます。
ここで 3 つの列が必要なので、各列の LI には共通の列番号が付いています (自分で設定します)。 0.1.2 または A.B.C、つまりこれら 3 つの列にラベルを付けます) ここでは、
数値 0 の 1 列目
数値 1 の 2 列目
数値 2 の 3 列目
とします。 > 各行について、 LI は 3 つだけ配置できます
最初の li は番号 0 にあり、2 番目の li は番号 1 にあり、3 番目の li は番号 2 にあります
4 番目の li は番号 0 にあり、 5 番目の li は番号 1 にあり、6 番目の li は番号 1 にあり、li は番号 2 にあります
したがって、インデックスを使用してモジュロを取ることを考えると、正確に 0 1 2, 0 1 2... を取得できます。
これにより、LI がどの列にあるかを判断できます。
Index%3 = 0 1 2, 0 1 2...
なぜ 3 つの数値のサイクルを取得する必要があるのでしょうか。 。したがって、将来そのようなループを取得したい場合は、モジュロ演算を検討できます。
2. TOP の値を設定します。これは、各列の合計の高さの値が異なるためです。したがって、さまざまな列の高さの値を保存するには 3 つの変数を設定する必要があります。
なぜこの値を取得する必要があるのでしょうか?
1. 初めてロードするとき、LI の TOP 値は現在の列の高さの値に基づいて設定されます。
2. AJAX リクエスト後のデータ LI は UL に挿入されるため、現在の列の高さの現在の合計の高さを知り、その TOP 値として新しい LI を指定する必要があります。
実際には、真ん中で言いたいことがたくさんあります。しかし、長すぎます。コード内のコメントも明確に書かれています。ご質問がございましたら、メッセージを残して私にご連絡ください。 ！ ！
言及すべきことの 1 つは、類似した関数が多数存在することです。簡単に呼び出せるように、それらを FUNCTION に記述しました。たとえば、LI の TOP と LEFT を設定し、LI の列数を取得し、列の合計の高さを設定します。これらはすべて public ブロックと function ブロックであるため、別の関数として記述することをお勧めします。




コードをコピー

コードは次のとおりです。 :

(function($){
$.fn.extend({
waterfall:function(value){
value=$.extend({
jsonUrl:"",
dataType:"",
cloum:"",
liWidth:""
},value)
//ウォーターフォール フローを含む DIV オブジェクトを参照します
var $this = $(this);
//ストレージ列のチャージ番号
var colmLeftIndex = 0;
var liHeight_0 = 0; liHeight_1 = 0;
var liHeight_2 = 0;

//列番号を設定します
function getcolums(col){
colmLeftIndex = col%value.cloum; >// 現在の列の高さを設定します
function getLiHeight(colIndex,hei){
switch(colIndex){
case 0:
liHeight_0 = hei
break; 1:
liHeight_1 = hei;
case 2:
liHeight_2 = hei;
}
//TOP と合計を設定します。各 LI LEFT の
function setLiOffset(oli,liH){
switch(colmLeftIndex){
case 0 :
oli.css({"left":value.liWidth*colmLeftIndex,"top" :liHeight_0} );
getLiHeight(colmLeftIndex,liH);
case 1:
oli.css({"left":value. liWidth*colmLeftIndex ,"top":liHeight_1});
getLiHeight(colmLeftIndex,liH);
ケース 2:
oli.css({"left":value.liWidth*colmLeftIndex) ,"top ":liHeight_2});
getLiHeight(colmLeftIndex,liH);
break
}
}

//初めてロードするときは、すべての LI を走査します。そして、各 LI の TOP 値と LEFT 値を見つけます
$this.find("li").each(function(index, element){
//現在の LI 参照
var $liThis = $(this) ;
//現在の LI の高さの値を取得します
var liH = $liThis.outerHeight();
//現在の列のシリアル番号を取得します
getcolums(index); >//現在の LI を取得します。高さの値は、対応する列の合計高さ変数に格納されます。
setLiOffset($liThis,liH)

});//最後の LI かどうかを判断します。各 UL が表示領域に入る
function see(objLiLast){
//ブラウザの表示領域の高さ
var see = document.documentElement.clientHeight;
//スクロール バーの距離slides
var winScroll = $ (this).scrollTop();
//ブラウザの上部からの各 UL の最後の LI
var lastLisee = objLiLast.offset().top
return lastLisee
(winScroll を参照) ?true:false;
var onOff = true; (){
//ドラッグ スクロールバー移動時にAJAXの「スイッチ」を送信するかどうか
$this.children("ul").each(function(index, element) {
//現在の UL を参照します
var ulThis = this;
//最後の LI を参照します
var lastLi = $("li:last",ulThis)
// 可視領域に入るかを呼び出しますfunction
var isSee = see(lastLi) ;
if(isSee && onOff){
onOff = false;
//新しい画像をロードするための AJAX リクエストを送信します
$.ajax( {
url:value.jsonUrl,
dataType:value.dataType,
success:function(data){
// 返された JSON 内のリスト データを走査します
$.each(data .list,function(keyList,ovalue){
// LIST 内の SRC 配列を走査し、画像パスを取得します
$.each(ovalue,function(keySrc,avalue){
$.each( avalue,function(keysrc1,value1){
var $imgLi = $("

< ;p>11111

")
//これはフローティング レイアウトとは異なります。 AJAX を呼び出す場合は、どの UL に挿入するかを指定する必要がないため、他の部分は同じです。
$this.children("ul").append($imgLi); insert ページ内の LI の列番号に
var _liindex = $imgLi.index();
getcolums(_liindex);
//ページに新しく挿入された LI の高さの値を取得します
var _nlih = $imgLi.outerHeight();
//現在の LI の TOP と LEFT を設定します
setLiOffset($imgLi,_nlih)
})
})
onOff = true;
})
}
})
}
})
}
})
})(jQuery)



デモのダウンロード
(これには、サーバー プラットフォームをローカル マシンにインストールする必要があります。私は APACHE を含む PHP スイート APPSERV を使用します)