瀑布流特效
2017-05-09 本文已影响0人
青橙1
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;
}
