jQuery はウォーターフォール フローを実装します。

HTML

复制代 代码如下:

 

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

 

CSS

复制代 代码如下:

 * {
     マージン: 0;
     パディング: 0;
 }
 #main {
     位置: 相対;
 }
 .box {
     パディング:15px 0 0 15px;
     float:left;
 }
 .pic {
     パディング: 10px;
     境界線: 1px 実線 #ccc;
     境界半径: 5px;
     ボックスシャドウ: 0px 0px 5px #ccc;
     img {
         幅:165px;
         高さ:自動;
     }
 }

JavaScript

复制代码代码如下:

$(window).on("load",function () {
ウォーターフォール();
var dataInt = { "data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src": "6.jpg"}]}
// json データをシミュレートします;
$(ウィンドウ).on("スクロール",function () {
if(checkScrollSlide){
$.each(dataInt.data,function (key,value) {
var oBox=$("

").addClass("box").appendTo($("#main"));
//jQuery は連結と暗黙的な反復をサポートします。 var oPic=$("

").addClass('pic').appendTo($(oBox));
$("").attr("src","images/" $(value).attr("src")).appendTo(oPic);
});
ウォーターフォール();
}
})
});
//フローレイアウトのメイン関数;
関数ウォーターフォール () {
var $boxs=$("#main>div");
// #main 要素の下にある直接の子要素 ​​div.box を取得します;
//各列の幅を取得します;
var w=$boxs.eq(0).outerWidth();
//outerWidth() はパディングとボーダーを含む幅を取得します;
//var w=$boxs.eq(0).width();
//width() は要素に定義された幅のみを取得できます;
varcols=Math.floor($(window).width()/w);
//取得する列の数;
$("#main").width(w*cols).css("margin","0 auto");
// #main 要素の幅と中央揃えのスタイルを設定します;
var hArr=[];
//各列の高さのセット;
$boxs.each(関数 (インデックス,値) {
//各ボックス要素をトラバースします;
//前のすべての要素の最低点を見つけるために、この要素を最低点よりも下に設定します;
var h=$boxs.eq(index).outerHeight();
//各ボックス要素の高さ、
if (index hArr[インデックス]=h;
//各列の最初の要素の高さを決定します;
} else{
var minH=Math.min.apply(null,hArr);
//列の高さの配列の最小の高さを取得します;
var minHIndex=$.inArray(minH,hArr);
//$.inArray() メソッドは、配列 (hArr) 内の要素 (minH) のインデックス値を取得します。
//console.log(value);
//この時の値は1行目以降の全てのbox要素のDOMオブジェクトです!;
$(値).css({
//$(value): jQuery メソッドを使用し続ける前に、DOM オブジェクトを jQuery オブジェクトに変換します。 "位置":"絶対",
"top":minH "px",
"left":minHIndex*w "px"
});
hArr[minHIndex] =$boxs.eq(index).outerHeight();
//最も低い最も高い要素の高さ 最も低い高さに追加された要素の高さ = 新しい列の高さ;
};
});
// console.log(hArr);
};
関数 checkScrollSlide () {
var $lastBox=$("#main>div").last();
var lastBoxDis=$lastBox.offset().top Math.floor($lastBox.outerHeight()/2);
varscrollTop=$(window).scrollTop();
var documentH=$(window).height();
Return (lastBoxDis }

詳細な説明については、コメントを注意深く参照してください。個別には書きません。