瀑布流效果档叔，就是每張大小不同的圖片不留白的鋪滿整個網(wǎng)頁瓶佳，首先要進(jìn)行頁面的設(shè)置芋膘，設(shè)置幾個固定的圖片，讓他們排成一排：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../瀑布/css/pubu.css">
</head>
<body>
<div class="warpper">
<div class="box">
<div class="pics">
<img src="../瀑布/images/1.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/1.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/10.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/11.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/21.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/31.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/41.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/38.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/39.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/41.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/42.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/43.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/44.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/45.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/46.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/33.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/35.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/37.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/51.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/52.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/53.jpg" alt="">
</div>
</div>
</div>
</body>
<script src="../瀑布/js/pubu.js"></script>
</html>
完成后，首先要進(jìn)行判斷为朋，因?yàn)榇笮〔灰坏膱D片排成排的話臂拓，中間會有很多留白的空隙，所以要在每行進(jìn)行判斷习寸，取每行中的高度最小的圖片,獲取之后胶惰，在最小的圖片之后，將下一行要排列的圖片絕對定位在 上一行最小高度的圖片之下霞溪，然后每次定位之后孵滞，在附加一個高度，讓圖片每次附加完后都會調(diào)換位置
var warpper = document.querySelector('.warpper');
var html_w = document.documentElement.clientWidth || document.body.clientWidth;
var boxs = document.querySelectorAll('.box');
//獲取圖片外包的盒子的總數(shù)
var box_w = boxs[0].offsetWidth;
//獲取單個box的寬度
var cols = Math.floor(html_w / box_w)
//獲取每行在當(dāng)前寬度下可裝的圖片數(shù)
warpper.style.width = box_w * cols + 'px'
//最大的盒子根據(jù)每個小盒子的寬度和數(shù)量來進(jìn)行寬度賦予
var arr = [];
for (var i = 0; i < boxs.length; i++) {
if (i < cols) {
//當(dāng)i小于當(dāng)前該行的個數(shù)時
arr.push(boxs[i].offsetHeight);
//數(shù)組arr將這些數(shù)字裝進(jìn)
} else {
var minH = Math.min.apply(Math, arr)
//取數(shù)組中高度最小的值
var ind = arr.indexOf(minH);
//獲取當(dāng)前最小值對應(yīng)的下標(biāo)
boxs[i].style.cssText = `position:absolute;top:${minH}px;left:${box_w*ind}px`
//為最小值之后的值設(shè)置一個絕對定位鸯匹，使該元素沿著最小值的高度往下排列
arr[ind] += boxs[i].offsetHeight
//每次循環(huán)之后坊饶，當(dāng)前的ind加上一個高度的值
}
}
最后，傳入數(shù)據(jù)忽你，每次進(jìn)行傳值調(diào)用排列即可幼东，完整代碼:
window.addEventListener('load', addEvent);
function addEvent() {
var data = {
'dataimg': [{
'src': '22.jpg'
},
{
'src': '23.jpg'
},
{
'src': '24.jpg'
},
{
'src': '25.jpg'
},
{
'src': '26.jpg'
},
{
'src': '27.jpg'
},
{
'src': '28.jpg'
},
{
'src': '29.jpg'
},
{
'src': '30.jpg'
},
{
'src': '31.jpg'
},
{
'src': '32.jpg'
},
{
'src': '33.jpg'
},
{
'src': '34.jpg'
},
{
'src': '35.jpg'
},
{
'src': '36.jpg'
},
{
'src': '37.jpg'
},
{
'src': '38.jpg'
},
{
'src': '39.jpg'
},
{
'src': '40.jpg'
},
{
'src': '41.jpg'
},
{
'src': '42.jpg'
},
{
'src': '43.jpg'
},
{
'src': '44.jpg'
},
{
'src': '45.jpg'
},
{
'src': '46.jpg'
},
{
'src': '47.jpg'
},
{
'src': '48.jpg'
},
{
'src': '49.jpg'
},
{
'src': '50.jpg'
},
{
'src': '51.jpg'
},
{
'src': '52.jpg'
},
{
'src': '53.jpg'
},
{
'src': '54.jpg'
},
{
'src': '55.jpg'
},
{
'src': '56.jpg'
},
{
'src': '57.jpg'
},
{
'src': '58.jpg'
},
{
'src': '59.jpg'
},
{
'src': '60.jpg'
},
{
'src': '61.jpg'
},
{
'src': '62.jpg'
},
{
'src': '63.jpg'
},
{
'src': '64.jpg'
},
{
'src': '65.jpg'
},
{
'src': '66.jpg'
},
{
'src': '67.jpg'
},
{
'src': '68.jpg'
},
{
'src': '69.jpg'
},
{
'src': '70.jpg'
},
{
'src': '71.jpg'
},
{
'src': '72.jpg'
},
{
'src': '73.jpg'
},
{
'src': '74.jpg'
},
{
'src': '75.jpg'
},
{
'src': '76.jpg'
},
{
'src': '77.jpg'
},
{
'src': '78.jpg'
},
{
'src': '79.jpg'
},
{
'src': '80.jpg'
},
{
'src': '81.jpg'
},
{
'src': '82.jpg'
},
{
'src': '83.jpg'
},
{
'src': '84.jpg'
},
]
}
instAll()
var warpper = document.querySelector('.warpper');
window.onscroll = function () {
if (isOk()) {
//滾動條判斷事件
for (var i in data.dataimg) {
//模擬請求臂容，獲得數(shù)據(jù)
warpper.innerHTML += `<div class="box">
<div class="pics">
<img src="../瀑布/images/${data.dataimg[i].src}" alt="">
</div>
</div>`
}
instAll()
//調(diào)用排列
}
}
function instAll() {
var warpper = document.querySelector('.warpper');
var html_w = document.documentElement.clientWidth || document.body.clientWidth;
var boxs = document.querySelectorAll('.box');
//獲取圖片外包的盒子的總數(shù)
var box_w = boxs[0].offsetWidth;
//獲取單個box的寬度
var cols = Math.floor(html_w / box_w)
//獲取每行在當(dāng)前寬度下可裝的圖片數(shù)
warpper.style.width = box_w * cols + 'px'
//最大的盒子根據(jù)每個小盒子的寬度和數(shù)量來進(jìn)行寬度賦予
var arr = [];
for (var i = 0; i < boxs.length; i++) {
if (i < cols) {
//當(dāng)i小于當(dāng)前該行的個數(shù)時
arr.push(boxs[i].offsetHeight);
//數(shù)組arr將這些數(shù)字裝進(jìn)
} else {
var minH = Math.min.apply(Math, arr)
//取數(shù)組中高度最小的值
var ind = arr.indexOf(minH);
//獲取當(dāng)前最小值對應(yīng)的下標(biāo)
boxs[i].style.cssText = `position:absolute;top:${minH}px;left:${box_w*ind}px`
//為最小值之后的值設(shè)置一個絕對定位科雳，使該元素沿著最小值的高度往下排列
arr[ind] += boxs[i].offsetHeight
//每次循環(huán)之后，當(dāng)前的ind加上一個高度的值
}
}
}
function isOk() {
var boxs = document.querySelectorAll('.box');
var screen_h = document.documentElement.clientHeight || document.body.clientHeight;
//獲取當(dāng)前可視窗口的高
var top = screen_h + document.documentElement.scrollTop || document.body.scrollTop;
//下拉框的高+可視窗口的高的和即為總高度
var last_img = boxs[boxs.length - 1].offsetTop + boxs[boxs.length - 1].clientHeight/2
//最后一張圖片底部離最上部的高度
return top > last_img ? true : false
//判斷脓杉，最后一張圖片的高度超過top時糟秘，停止
}
}
