瀑布流實現(xiàn)原理
- 固定每一個
item的寬度 - 根據(jù)父級絕對定位
-
js計算每一行可以排列幾個 （父級總寬度 / item）= 排列個數(shù) - 寫一個空數(shù)組 循環(huán)保存每一行的下標高度
- 循環(huán)所有
item獲取當前行最小的高度和索引，改變當前的left和top會用到 -
left的值就是當前索引*item的寬度 -
top的值就是當前索引的高度 - 計算完以后重置當前索引的高度
elHeight[minIndex]+= 當前的高度惹恃，依次循環(huán)就可以了 - 瀏覽器縮放時添加一個
resize再從第三部重新計算寬度狸演，然后循環(huán)數(shù)據(jù)蕉斜，調(diào)整樣式
實例代碼
<!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();
// 改變窗口時執(zhí)行
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;
}
// 循環(huán) 所有item
$('.item').each(function(index, el) {
// apply 傳入數(shù)組 取得最小的高度
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(); // 執(zhí)行
</script>
</body>
</html>
總結
瀑布流布局實現(xiàn)了茅糜，在數(shù)據(jù)多的情況下沒有做瀏覽器滾動到底部時再加載數(shù)據(jù)橄杨，后續(xù)會補充秘症。
