jQuery 实现瀑布流 个人完美版

瀑布流 个人完美版"/>

jQuery 实现瀑布流 个人完美版

前面已经通过这种方式实现过瀑布流了。看到慕课网上有一个类似的视频教程，就仔细看了一下。就大体实现思路来说，基本是没差的。但是就实现方法来说，慕课网上的教程（）我感觉还是繁琐冗余了。尤其是javascript原生实现方法。
但其jquery方法，我还是学到一点的。就是如何查找数值在数组中的索引。

html+css结构

查看：

jQuery实现瀑布流

$(function(){var Obj = $("#waterfall"),Ul = Obj.children('ul'),Li = Ul.children('li');$(window).load(function(event) {waterfall();});$(window).resize(function(event) {waterfall();});function waterfall(){var WinW = $(window).width();var Blank = 20,                     // 每个图片之间的间隔留白LiW = 200+Blank,                // 一个图片距离上一个图片的宽度距离LiCol = parseInt(WinW/LiW),     // 计算在当前窗口下，有几列UlW = LiCol*LiW-Blank;          // 根据有几列，设定总的宽度（减掉最后一个留白）Ul.width(UlW);var AllLi = [];                     // 建立一个空数组变量Li.each(function(index, e){var T = $(this);if (index<LiCol) {                      // 第一行的处理AllLi[index] = T.outerHeight();     // 给数组添加内容，为当前元素的高度值T.css({top: 0,left: LiW*index+'px'});} else{var MinH = Math.min.apply(null,AllLi);      // 找到数组中，最小的那个值（也就是留白最大的）var MinI = $.inArray(MinH,AllLi);			// 通过 $.inArray 查找数值在数组中的索引var ThisH = T.outerHeight()+Blank;          // 自身的高度加上留白AllLi[MinI] = parseInt(MinH+ThisH);         // 将被占位的数组重新赋值T.css({top: MinH+Blank+'px',left: LiW*MinI+'px'});};});}
})

效果预览地址：
这个是原生js的效果。jquery的和他一样。