jQuery實現瀑布流布局
核心思路：用數組存取每一列li的高度，每次添加li都往最小高度那一列上添加，每添加一個li就把它的高度加給最小高度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
margin: 0 auto;
position: relative;
}
ul li {
width: 300px;
position: absolute;
}
ul li img {
width: 100%;
}
</style>
</head>
<body>
<ul></ul>
</body>
<script src="//cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$.ajax({//請求數據
url: '//rap2.taobao.org:38080/app/mock/257210/json',//請求地址
dataType: 'JSON'//請求數據類型
}).done(a => {//請求成功
a = a.data
const teep = 10,//每個li之間的間隙
width = 300,//每個li的寬度，存起來方便以後使用
cols = Math.floor(($(document).innerWidth()) / (width + teep)),//計算圖片列數
list = $('ul')[0].children,//動態獲取ul下的子元素
hh = [] //存取每一列的高度
let num = 0//存取圖片載入完成數量
$('ul').css('width', cols * (width + teep))//設置ul寬度
$(a).each((index, item) => { //遍曆數據
$('<li>').html(`<img src="${item.src}">`).appendTo('ul')//創建li
})
$(list).find('img').on('load', function() {//圖片載入完成
num++//每載入完成一張圖片就加1
if(num==$(list).length){//圖片全部載入完成，開始設置每個li的坐標
$(list).each((index,item)=>{//遍歷li
if (index < cols) {//設置第一行li的坐標
$(list).eq(index).css({
left: (width + teep) * index,
top: teep
})
hh.push($(list).eq(index).height() + teep*2)//添加第一行每一列li的高度到數組hh
} else {//設置其它li的坐標
let minHeight = Math.min(...hh)//獲取最小高度
let minIndex = hh.indexOf(minHeight)//獲取最小高度的索引
$(list).eq(index).css({
left: (width + teep) * minIndex,
top: minHeight
})
hh[minIndex]+=$(list).eq(index).height()+teep//更新最小高度
}
})
}
})
})
</script>
</html>
