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>