jQuery實現瀑布流（通過mock.js模擬數據）
<html>
<head>
<style>
*{
margin: 0;padding: 0;
}
#box{
/*display: flex;*/
/*justify-content: space-between;*/
}
#box > div{
float: left;
/*width: 20%;*/
/* margin-right: 1.3%;
*/ }
#box>div:last-child{
/*margin-right: 0;*/
}
</style>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<div id='box'>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<script src="mock.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var data = Mock.mock({//模擬圖片
"list|120-640":[
{
"height|180-420":4,
'bg':"@color"
}
]
})
const dLen = $("#box>div").length;//獲取一共幾列
$("#box>div").width(100/dLen+'%');//設置每列的寬度
const len = data.list.length;//獲取所有的圖片的長度
for(let u=0; u<len; u++){
const min = {//存儲最低的元素 和 它對應的下標
h: $("#box>div").eq(0).height(),
i: 0
}
for(let j=1; j<dLen; j++){
let h = $("#box>div").eq(j).height();
if(h < min.h){//通過判斷獲取最低的元素
min.h = h;
min.i = j;
}
}
var $div = $('<div>').css({//動態添加到最低的div
'height': data.list[u].height+'px',
'background': data.list[u].bg
})
$("#box>div").eq(min.i).append($div);//最後添加到頁面裏
}
})
</script>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章