利用jquery实现瀑布流效果

前言：

现在很多内容型网站都会采用瀑布流布局来实现内容展示，包括文章类及图片类，我们可以自己动手来编写属于我们自己的瀑布流插件。

效果：

CSS部分：

*{ margin: 0; padding: 0; } body { font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; } .clearfix:after{ content: ""; display: block; clear: both; } input,button,select,textarea{ outline:none;border: none; } a{ text-decoration: none; } ul,li{ list-style: none; } img{ border: none; } .wrap { position: relative; min-width: 440px; width: 90%; margin: 0 auto; } .item { width: 200px; margin: 10px; position: absolute; transition: all .6s ease-out; font-size: 50px; color: #fff; text-align: center; }

HTML部分：

<div class="wrap"></div>

JS部分：

var WaterFall = { //方法初始化 init: function(){ // 添加 item 盒子 this.addItem(); // 添加好盒子就开始布局 this.layout(); // 改变窗口时执行 this.resize(); }, //随机生成DIV addItem: function(){ var wrap = $('.wrap'); // 生成30个div 随机高度 和 颜色 var item = ''; for (var i = 0; i < 20; i++) { item +='<div class="item" style="height:'+parseInt(Math.random() * 100 + 230)+'px;background-color:'+this.getRandColor()+'">'+i+'</div>'; } wrap.append(item); }, //瀑布流布局 layout: function(){ var elHeight = []; // 计算每一行可以存放几个 item 总宽 / item宽度 var countWidth = Math.floor( $('.wrap').width() / $('.item').width()); // 初始化添加 第一行高度的下标 for (var i = 0; i < countWidth; i++) { elHeight[i] = 0; } // 循环 所有item $('.item').each(function(index, el) { // apply 传入数组 取得最小的高度 var minValue = Math.min.apply(null, elHeight); // 然后获取当前高度的索引 var minIndex = elHeight.indexOf(minValue) // 修改当前的top 和 left $(this).css({ top: elHeight[minIndex], // 获取当前索引对应的高度 left: $(this).outerWidth(true) * minIndex // 当前的left值为 索引 * 宽度（位于第几个） }) // 当前索引的高度 += 当前 item 的高度 （比如计算第二排高度时， 就等于上一个的 top + 当前的高度） elHeight[minIndex] += $(this).outerHeight(true); }); }, //容器改变时执行 resize: function(){ $(window).resize(function() { WaterFall.layout(); }); }, //随机颜色 getRandColor: function(){ var str = '1234567890abcdef'; var colorStr = '#'; for(var i =0; i < 6; i++){ colorStr += str[ Math.floor(Math.random() * str.length) ]; } return colorStr; } } // 执行方法 WaterFall.init();