利用jquery实现瀑布流3种案例

一、瀑布流

引言：我们经常见到很多网站的瀑布流功能，如淘宝、京东这些商品等等..

实现它我们首先考虑几个问题：1、获取到数据 2、排列的方式 3、如何实现排列

其实，在瀑布流里有个核心的功能就是用到了绝对定位

我们逐步深入分析：

这是html的布局，css布局可以自己设置，只要保证grid盒子有绝对定位，其父元素有相对定位即可！后面有参考代码

下面是script部分

这种方式，可以通过for循环按照顺序获取图片的索引值，然后不断的更改其css样式中的top值和left值！

在我们获取图片的资源时，有的时候图片的高度是不一致的，如果一直按照顺序排列，最后的图片显示，排列不整齐，就会效果不佳！

继续往下看：

我们可以通过另一种方法，来实现图片插入当前列最短的一列，可以解决这个问题！

下面我们来主要看一下jquery的代码：

好了，现在我们已经通过两种方式解决了瀑布流这个问题，但是我们还有个问题没有解决，那就是做瀑布流很大的原因是因为图片的量比较大，我们一个一个写html是不是有点太low了！

继续往下看：

下面介绍一种利用引擎模板来获取json后台的数据的方式，实现这个问题！

1、我们只需要搭建一个html盒子即可！

2、盒子搭建好了，数据要获取啊，就靠它！

3、这是两个js库，在网上可下载到！

4、下面是具体的js部分，需要仔细分析了！

主要包括，调用搜索引擎模板里获取到的内容，绑定函数，转换成jquery对象！

这一部分主要包括：通过ajax向json请求数据

这一部分主要包括：遍历函数，进行寻找最短的列排列格子！

还有这一些，也是第四部分：

最后一步是：滚动的函数，这一部分建议使用console.log在后台验证一下，更容易理解！

虽然最后一种办法麻烦，但是这一次完成，我们就可以使用很多次，并且自动获取很多数据！

下面给大家附上原码，大家好好测试一下，不要忘记更改图片和路径哦！

第一种方法原码：

<script type="text/javascript" src="js/jquery-1.12.3.min.js">
<script type="text/javascript" src="js/underscore.js">
<script type="text/javascript">
window.onload = function(){
//每个格格不一定往自己序号%3这个列插入，看哪个列目前最矮，插在哪里=
//得到所有的grid
$grids = $(".grid");
//用一个数组存储当前三个列的总高度
var colHeight = [0,0];
// console.log(colHeight);
// 遍历小格格
$grids.each(function(){
//找一下当前的最短列是谁
var minValue = .min(colHeight); //colHeight里面的最小的值！
//看一下最短列出现在index几的位置上
var minIndex = .indexOf(colHeight,minValue);//最短的值的下标
// console.log(minIndex);
$(this).css({
"top" : minValue,"left" : minIndex * 270
});
colHeight[minIndex] += $(this).outerHeight() + 20;
// console.log(colHeight[minIndex]);
})
}