瀑布流實(shí)現(xiàn)原理
- 固定每一個(gè)
item的寬度 - 根據(jù)父級(jí)絕對定位
-
js計(jì)算每一行可以排列幾個(gè) （父級(jí)總寬度 / item）= 排列個(gè)數(shù) - 寫一個(gè)空數(shù)組 循環(huán)保存每一行的下標(biāo)高度
- 循環(huán)所有
item獲取當(dāng)前行最小的高度和索引，改變當(dāng)前的left和top會(huì)用到 -
left的值就是當(dāng)前索引*item的寬度 -
top的值就是當(dāng)前索引的高度 - 計(jì)算完以后重置當(dāng)前索引的高度
elHeight[minIndex]+= 當(dāng)前的高度，依次循環(huán)就可以了 - 瀏覽器縮放時(shí)添加一個(gè)
resize再從第三部重新計(jì)算寬度，然后循環(huán)數(shù)據(jù)，調(diào)整樣式
實(shí)例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Waterfall flow</title>
<style>
*{
margin: 0;
padding: 0;
}
body {
font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
input,button,select,textarea{
outline:none;border: none;
}
a{
text-decoration: none;
}
ul,li{
list-style: none;
}
img{
border: none;
}
.wrap {
position: relative;
min-width: 440px;
width: 90%;
margin: 0 auto;
}
.item {
width: 200px;
margin: 10px;
position: absolute;
transition: all .6s ease-out;
font-size: 50px;
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div class="wrap"></div>
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script>
var WaterFall = {
init: function(){
// 添加 item 盒子
this.addItem();
// 添加好盒子就開始布局
this.layout();
// 改變窗口時(shí)執(zhí)行
this.resize();
},
addItem: function(){
var wrap = $('.wrap');
// 生成30個(gè)div 隨機(jī)高度 和 顏色
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 = [];
// 計(jì)算每一行可以存放幾個(gè) item 總寬 / item寬度
var countWidth = Math.floor( $('.wrap').width() / $('.item').width());
// 初始化添加 第一行高度的下標(biāo)
for (var i = 0; i < countWidth; i++) {
elHeight[i] = 0;
}
// 循環(huán) 所有item
$('.item').each(function(index, el) {
// apply 傳入數(shù)組 取得最小的高度
var minValue = Math.min.apply(null, elHeight);
console.log(minValue)
// 然后獲取當(dāng)前高度的索引
var minIndex = elHeight.indexOf(minValue)
// 修改當(dāng)前的top 和 left
$(this).css({
top: elHeight[minIndex], // 獲取當(dāng)前索引對應(yīng)的高度
left: $(this).outerWidth(true) * minIndex // 當(dāng)前的left值為 索引 * 寬度（位于第幾個(gè)）
})
// 當(dāng)前索引的高度 += 當(dāng)前 item 的高度 （比如計(jì)算第二排高度時(shí)， 就等于上一個(gè)的 top + 當(dāng)前的高度）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(); // 執(zhí)行
</script>
</body>
</html>
總結(jié)
瀑布流布局實(shí)現(xiàn)了，在數(shù)據(jù)多的情況下沒有做瀏覽器滾動(dòng)到底部時(shí)再加載數(shù)據(jù)，后續(xù)會(huì)補(bǔ)充。
