jquery瀑布流布局和鼠标滚动加载
jquery部分：
//引入JQ库（版本不同会有差别）
<script src="https://cdn.bootcss.com.jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).on('load',function(){
var dataImg = {'data':[
{'src':'1.jpg'},
{'src':'2.jpg'},
{'src':'3.jpg'},
{'src':'4.jpg'},
{'src':'5.jpg'},
{'src':'6.jpg'},
//省略N个
]}
//当滚动鼠标时
window.onscroll = function(){
//判断是否可以滚动加载
if(scrollLoad()){ //满足滚动加载
$.each(dataImg.data,function(index,value){ 遍历dataImg的data数据,和动态创建盒子对象的函数,
var box = $('<div>').addClass('box').appendTo('#container');
var content = $('<div>').addClass('content').appendTo(box);
//console.log('src','./images/' + $(value).attr('src')); //打印每张图片的链接地址
$('<img>').attr('src','./images/' + $(value).attr('src')).appendTo(content);
})
imgLoad(); //动态加载后让图片重新按瀑布流排列
}
}
imgLoad(); //调用函数
})
//创建一个鼠标滚动加载盒子的函数，加载原理：鼠标滚动到最后一张图的高度的一半时就加载更多的图片
function scrollLoad(){
var box = $('.box');
//获取最后一张图的高度 = 最后一第图的offsetTop值 + 最后图片的高度的一半
var lastboxHeight = box.last().get(0).offsetTop + Math.floor(box.last().height/2);
var documentHeight = $(document).width(); //获取当前文档的高度
var scrollHeight = $(window).scrollTop(); //获取鼠标滚动的高度
//当最后一张图的高度 < 当前文档的高度 + 鼠标滚动的高度 则可以继续滚动鼠标加载 否则不加载
return (lastboxHeight < documentHeight + scrollHeight)?true:false;
}
//创建一个瀑布流布局的函数
function imgLoad(){
var box = $('.box'); //定义变量方便获取
var boxWidth = box.eq(0).width(); //计算box的宽度(因为每个都一样，所以获取第一个)
var num = Math.floor($(window).width()/boxWidth); //计算每一排的盒子个数(用窗口宽除以一个盒子的宽 = 盒子的个数)
var boxArr = [] //定义一个数组存放每排的盒子的高度
box.each(function(index,value){ //遍历盒子的元素 以index为盒子的位置--value为盒子对象为参数传进来
var boxHeight = box.eq(index).height(); //计算出每个盒子的高度
if(index < num){ //index < num (num是每一排的盒子个数,index < num 就是指一排的盒子 在这里就是指第一排的盒子)
boxArr[index] = boxHeight; //数组存放的是每个盒子的高度 => 数组元素的索引就是每个盒子的高度
}else{ //
var minboxHeight = Math.min.apply(null,boxArr); //获取高度最小的盒子
var minboxIndex = $.inArray(minboxHeight,boxArr); //计算高度最小的盒子的位置
$(value).css({ //重新设置每个盒子对象的css，都是以每列最小高度排列
'position':'absolute', //给第一排后每个盒子重新定位
'top':minboxHeihgt + 10, //top值为最小高度盒子的top值再+10px（+10px让盒子的空隙）
'left':box.eq(minboxIndex).position().left; //left值为最小高度盒子的left值
});
//为使每个盒子不重叠，每当排完一行时就重新计算每一排的最小高度的盒子 =>方法：让排好的盒子计算当前列的高度进行排列
boxArr[minboxIndex] += box.eq(index).height() + 10; //最后加10是让第一排之后的盒子上下有间隙为10px
}
});
};
});
</script>
css部分：
*{ padding: 0; margin: 0;}
#container{ width: 90%; margin: 0 auto;}
.box{ position: relative; float: left; margin-left: 5px; margin-right: 5px; }
.content{ padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 0 2px #ccc;}
.content img{ width: 210px; height: auto;}
.content h4{ font-size: 14px; color: #777； margin: 5px 0;}
html部分：
<div id="container">
<div class="box">
<div class="content">
<img src="images/1.jpg" alt="">
<h4>This is a pic title</h4>
</div>
</div>
<div class="box">
<div class="content">
<img src="images/1.jpg" alt="">
<h4>This is a pic title</h4>
</div>
</div>
<div class="box">
<div class="content">
<img src="images/1.jpg" alt="">
<h4>This is a pic title</h4>
</div>
</div>
<div class="box">
<div class="content">
<img src="images/1.jpg" alt="">
<h4>This is a pic title</h4>
</div>
</div>
<!-- 重复多些box -->
</div>
