/*
* @Author: lenovo
* @Date: ? 2017-08-14 18:02:39
* @Last Modified by: ? lenovo
* @Last Modified time: 2017-08-15 13:59:27
*/


$.fn.extend({
waterfall:function(){
var $_this=this;
//大盒子寬度
var totalwidth=$_this.width();
//子元素寬度
var itemwidth=$_this.children('.item').width();
//每一行元素的個數
var count=Math.floor(totalwidth/itemwidth);
//子元素之間的間距
var margin=(totalwidth-itemwidth*count)/(count-1);
//初始化高度數組
var heightarr=[];
for(var i=0;i<count;i++){
heightarr[i]=margin;
}
//jq中遍歷數組的方法,index是下標，element是數組值
$_this.children('.item').each(function(index,element){
var currentheight=$(element).height();


//計算元素擺放的位置，找出高度最小的，放到里面
var minindex=0;
var minHeight=heightarr[0];
for(var i=0;i<heightarr.length;i++){
if(heightarr[i]<minHeight){
minindex=i;
minHeight=heightarr[i];
}
}
//給元素定位

$(element).css({
top:minHeight,
left:minindex*margin+minindex*itemwidth


});
//改變當前元素高度
minHeight+=currentheight;
minHeight+=margin;
heightarr[minindex]=minHeight;




});
//獲取元素的最大的長度，設置為父盒子長度
var maxHeight=heightarr[0];
for(var i=0;i<heightarr.length;i++){
if(heightarr[i]>maxHeight){
maxHeight=heightarr[i];
}
}
$_this.height(maxHeight);
}


})

總結

以上是生活随笔為你收集整理的瀑布流插件编写的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。