HTML結構
<div id="main">
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
// 省略好多張圖片
<!-- 引入Js文件 -->
<!-- 通常在body里面引入比較好 不會造成頁面加載超載 -->
<script src="js/index.js"></script>
<script src="js/Scroll.js"></script>
<script src="js/Underscore-min.js"></script>
</div>
Css樣式
<style>
* {
margin: 0;
padding: 0;
border: 0;
}
img {
vertical-align: top;
}
body, html {
width: 100%;
height: 100%;
}
#main {
position: relative;
}
.box {
padding: 15px 0 0 15px;
float: left;
}
.pic {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
}
.pic img {
width: 165px;
}
</style>
Js代碼
window.onload = function () {
// 1.實現瀑布流布局
waterFall('main', 'box');
// 2.滾動加載圖片
window.onscroll = function () {
// 2.1 判斷是否加載圖片
if (checkWillLoadNewImage()) {
// 2.2 造數據
var dataArr = [
{src: '12.jpg'},
{src: '32.jpg'},
{src: '15.jpg'},
{src: '23.jpg'},
{src: '15.jpg'},
{src: '34.jpg'},
{src: '24.jpg'},
{src: '13.jpg'},
{src: '25.jpg'}
];
// 2.3 根據數據創建盒子
for (var i = 0; i < dataArr.length; i++) {
var newBox = document.createElement('div');
newBox.setAttribute('class', 'box');
$('main').appendChild(newBox);
var newPic = document.createElement('div');
newPic.setAttribute('class', 'pic');
newBox.appendChild(newPic);
var newImg = document.createElement('img');
newPic.appendChild(newImg);
newImg.src = 'images/' + dataArr[i].src;
}
// 2.4 重新調用瀑布流布局
waterFall('main', 'box');
}
}
}
/** 函數調用1
* 實現瀑布流布局
* @param parent 父盒子ID
* @param child 子盒子Class
*/
function waterFall(parent, child) {
// -- 父盒子居中 --
// 1. 獲取所有的盒子
var allBox = $(parent).getElementsByClassName(child);
// 2. 獲取盒子的寬度
var boxWidth = allBox[0].offsetWidth;
// 3. 獲取屏幕的寬度
var clientW = document.documentElement.clientWidth || document.body.clientWidth;
// 4. 求出列數
var cols = parseInt(clientW / boxWidth);
// 5. 賦值給父盒子 然后居中
$(parent).style.width = cols * boxWidth + 'px';
$(parent).style.margin = '0 auto';
// -- 子盒子定位 --
// 1. 定義數組
var heightArr = [], boxHeight = 0, minBoxHeight = 0, minBoxIndex = 0;
// 2. 遍歷盒子
for (var i = 0; i < allBox.length; i++) {
// 3. 取出盒子的高度
boxHeight = allBox[i].offsetHeight;
// 4. 把盒子添加進數組
if (i < cols) {
heightArr.push(boxHeight);
}
// 4.1 剩余其他的盒子
else {
// 4.1.1 求出最小盒子的高度
minBoxHeight = Math.min.apply(null, heightArr);
// 4.1.2 求出最小盒子的索引號
minBoxIndex = getMinBoxIndex(heightArr, minBoxHeight);
// 4.1.2 子盒子定位
allBox[i].style.position = 'absolute';
allBox[i].style.left = minBoxIndex * boxWidth + 'px';
allBox[i].style.top = minBoxHeight + 'px';
// 更新高度
heightArr[minBoxIndex] += boxHeight;
}
}
}
/** 函數調用2
* 最小索引
* @param arr 數組
* @param val 索引值
* @returns {返回索引值}
*/
function getMinBoxIndex(arr, val) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] == val) {
return i;
}
}
}
/** 函數調用3
* 判斷是否加載圖片
*/
function checkWillLoadNewImage() {
// 1.獲取所有的盒子
var allBox = $('main').getElementsByClassName('box');
// 2.得到最后一個盒子
var lastBox = allBox[allBox.length - 1];
// 3.求出最后一個盒子高度的一半 + 頭部偏離的高度
var lastBoxDis = lastBox.offsetWidth * 0.5 + lastBox.offsetTop;
// 4.求出屏幕的高度
var screenH = document.documentElement.clientHeight || document.body.clientHeight;
// 5. 求出頁面偏離頭部的距離
var scrollTop = scroll().top;
// console.log(lastBoxDis, screenH, scrollTop); 開發中時時進行打印檢測 防止錯誤bug
return lastBoxDis <= scrollTop + screenH;
}
特效展示
瀑布流.gif
