圖檔：圖檔寬度一樣，大概為192px;
1.把圖檔設成絕對定位
2.設定總體寬度，用總寬度/圖檔寬度，可以得知要排列的列數。
var itemBox = document.getElementById('itemBox');
var items = document.getElementsByClassName('item');
// 1 擷取到 #itemBox 寬度
var itemBoxW = itemBox.offsetWidth;
// 2 擷取到.item 寬度
var itemW = items[0].offsetWidth;
// 3 求出列數
var column = parseInt(itemBoxW / itemW);
3.求圖檔之間的間隔，沒有間隔會很難看的
var distence = (itemBoxW - itemW * column) / (column - 1);
4.先将第一行圖檔的offsetHeight存儲在數組裡，取得offsetHeight最小，索引最先的圖檔。
// 擷取數組的最小值以及索引
function getMin(arr) {
var obj = {};
obj.minV = arr[0];
obj.minI = 0;
for (var i = 1; i < arr.length; i++) {
if (obj.minV > arr[i]) {
obj.minV = arr[i];
obj.minI = i;
}
}
return obj;
}
}
5.實作瀑布流方法
// 實作瀑布流布局的方法
function waterFull() {
for (var i = 0; i < items.length; i++) {
if (i < column) {
items[i].style.left = (itemW + distence) * i + 'px';
//類似于offset，client之類的得到的是數字
arr[i] = items[i].offsetHeight;
// console.log(arr);
} else {
// 列高
var minV = getMin(arr).minV;
// 索引
var minI = getMin(arr).minI;
items[i].style.left = (itemW + distence) * minI + 'px';
items[i].style.top = minV + distence + 'px';
//從這個到最上面的height，替換剛開始最小的offseHeight儲存在數組裡，再用getMin(arr)
//循環得到原來第二個最小的，此時新存儲的數字是最大的。
arr[minI] = minV + distence + items[i].offsetHeight;
}
}
}
6.滾動視窗，持續不斷的擷取圖檔（ps:遇到的坑：圖檔要填滿可視區，不然無法生成滾動條）
window.onscroll = function () {
//此時pageYoffset相等于scrollTop
if (window.pageYOffset + window.innerHeight > getMin(arr).minV) {
var json = [
{ "src": "./images/P_000.jpg" },
{ "src": "./images/P_001.jpg" },
{ "src": "./images/P_002.jpg" },
{ "src": "./images/P_003.jpg" },
{ "src": "./images/P_004.jpg" },
{ "src": "./images/P_005.jpg" },
{ "src": "./images/P_006.jpg" },
{ "src": "./images/P_007.jpg" },
{ "src": "./images/P_008.jpg" },
{ "src": "./images/P_009.jpg" },
{ "src": "./images/P_010.jpg" }
];
for (var i = 0; i < json.length; i++) {
var div = document.createElement('div');
div.className = 'item';
var img = document.createElement('img');;
img.src = json[i].src;
div.appendChild(img);
itemBox.appendChild(div);
}
waterFull();
}
}
7.總代碼
<!DOCTYPE html>
<html >
<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>
<style>
* {
margin: 0;
padding: 0;
}
#itemBox{
width:1050px;
margin: 0 auto;
position: relative;
/* display: flex;
flex-direction: raw;
flex-wrap: wrap; */
}
.item{
padding: 4px;
position: absolute;
border: 1px solid #bebebe;
}
</style>
</head>
<body>
<div id="itemBox">
<!-- <img>要超過螢幕才會出現滾動條 -->
<div class="item">
<img src="./images/p_000.jpg"></img>
</div>
<div class="item">
<img src="./images/p_001.jpg"></img>
</div>
<div class="item">
<img src="./images/p_002.jpg"></img>
</div>
<div class="item">
<img src="./images/p_003.jpg"></img>
</div>
<div class="item">
<img src="./images/p_004.jpg"></img>
</div>
<div class="item">
<img src="./images/p_005.jpg"></img>
</div>
<div class="item">
<img src="./images/p_006.jpg"></img>
</div>
<div class="item">
<img src="./images/p_006.jpg"></img>
</div>
<div class="item">
<img src="./images/p_006.jpg"></img>
</div>
<div class="item">
<img src="./images/p_006.jpg"></img>
</div>
<div class="item">
<img src="./images/p_006.jpg"></img>
</div>
<div class="item">
<img src="./images/p_006.jpg"></img>
</div>
<div class="item">
<img src="./images/p_006.jpg"></img>
</div>
<div class="item">
<img src="./images/p_006.jpg"></img>
</div>
<div class="item">
<img src="./images/p_006.jpg"></img>
</div>
<div class="item">
<img src="./images/p_006.jpg"></img>
</div>
</div>
<script>
window.onload = function () {
/*
思路分析
1 擷取到.itemBox 寬度
2 擷取到.item 寬度
3 求出列數
4 求出間距
5 實作瀑布流布局的方法
6 滾動頁面時 加載資料
*/
// 擷取到相關元素
var itemBox = document.getElementById('itemBox');
var items = document.getElementsByClassName('item');
// 1 擷取到 #itemBox 寬度
var itemBoxW = itemBox.offsetWidth;
// 2 擷取到.item 寬度
var itemW = items[0].offsetWidth;
// 3 求出列數
var column = parseInt(itemBoxW / itemW);
console.log(column)
// 4 求出間距
var distence = (itemBoxW - itemW * column) / (column - 1);
// 5 實作瀑布流布局的方法
// 定義一個存儲每列高度的容器
var arr = [];
waterFull();
// 6 滾動頁面時 加載資料
window.onscroll = function () {
if (window.pageYOffset + window.innerHeight > getMin(arr).minV) {
var json = [
{ "src": "./images/P_000.jpg" },
{ "src": "./images/P_001.jpg" },
{ "src": "./images/P_002.jpg" },
{ "src": "./images/P_003.jpg" },
{ "src": "./images/P_004.jpg" },
{ "src": "./images/P_005.jpg" },
{ "src": "./images/P_006.jpg" },
{ "src": "./images/P_007.jpg" },
{ "src": "./images/P_008.jpg" },
{ "src": "./images/P_009.jpg" },
{ "src": "./images/P_010.jpg" }
];
console.log(json)
for (var i = 0; i < json.length; i++) {
var div = document.createElement('div');
div.className = 'item';
var img = document.createElement('img');;
img.src = json[i].src;
div.appendChild(img);
itemBox.appendChild(div);
}
waterFull();
}
}
// 實作瀑布流布局的方法
function waterFull() {
for (var i = 0; i < items.length; i++) {
if (i < column) {
items[i].style.left = (itemW + distence) * i + 'px';
arr[i] = items[i].offsetHeight;
// console.log(arr);
} else {
// 高
var minV = getMin(arr).minV;
// 索引
var minI = getMin(arr).minI;
items[i].style.left = (itemW + distence) * minI + 'px';
items[i].style.top = minV + distence + 'px';
//下一組的height
arr[minI] = minV + distence + items[i].offsetHeight;
}
}
}
// 擷取數組的最小值以及索引
function getMin(arr) {
var obj = {};
obj.minV = arr[0];
obj.minI = 0;
for (var i = 1; i < arr.length; i++) {
if (obj.minV > arr[i]) {
obj.minV = arr[i];
obj.minI = i;
}
}
return obj;
}
}
</script>
</body>
</html>