jQueryの滝の流れはこう書くことができます
3670 ワード
滝の流れの実現原理各 親絶対位置 空の配列ループを書き込み各行の下付きスケール高さを保存 すべての が使用されます.計算後現在のインデックスの高さ ブラウザーズーム時に インスタンスコード
オンライン表示
まとめ
滝の流れのレイアウトが実現し、データが多い場合はブラウザをしないで最後までスクロールしたときにデータをロードし、後で補充します.
itemの幅を固定js計算各行に複数配列可能(親の合計幅/item)=配列個数itemをループして、現在の行の最小の高さとインデックスを取得し、現在のleftとtopを変更すると、leftの値が現在のインデックス*itemの幅topの値が現在のインデックスの高さelHeight[minIndex]+=現在の高さをリセットし、順次ループすればよいresizeを追加し、第3部から幅を再計算し、データをループし、スタイルを調整
Waterfall flow
var WaterFall = {
init: function(){
// item
this.addItem();
//
this.layout();
//
this.resize();
},
addItem: function(){
var wrap = $('.wrap');
// 30 div
var item = '';
for (var i = 0; i < 30; i++) {
item +='<div class="item" style="height:'+parseInt(Math.random() * 100 + 230)+'px;background-color:'+this.getRandColor()+'">'+i+'</div>';
}
wrap.append(item);
},
layout: function(){
var elHeight = [];
// item / item
var countWidth = Math.floor( $('.wrap').width() / $('.item').width());
//
for (var i = 0; i < countWidth; i++) {
elHeight[i] = 0;
}
// item
$('.item').each(function(index, el) {
// apply
var minValue = Math.min.apply(null, elHeight);
console.log(minValue)
//
var minIndex = elHeight.indexOf(minValue)
// top left
$(this).css({
top: elHeight[minIndex], //
left: $(this).outerWidth(true) * minIndex // left * （ ）
})
// += item （ ， top + ）elHeight[0] += 90 90
elHeight[minIndex] += $(this).outerHeight(true);
});
},
resize: function(){
$(window).resize(function() {
WaterFall.layout();
});
},
getRandColor: function(){
var str = '1234567890abcdef';
var colorStr = '#';
for(var i =0; i < 6; i++){
colorStr += str[ Math.floor(Math.random() * str.length) ];
}
return colorStr;
}
}
WaterFall.init(); //
オンライン表示
まとめ
滝の流れのレイアウトが実現し、データが多い場合はブラウザをしないで最後までスクロールしたときにデータをロードし、後で補充します.