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

").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 }