瀑布流布局與自定義瀑布流布局外掛程式

瀑布流布局是網頁中經常採用的一種布局方式，其布局有如下特點：

瀑布流布局特點：

（1）**元素按列排放

（2）列寬一致，但高度不等

（3）布局過程中將優先向高度最小的列補充資料

以下是自定義的乙個jquery瀑布流外掛程式：jquery.mywaterfull.js

(function

($))
; arrheight.push($
(item).height() + space)
; //將第一行中的列的高度新增到陣列中 } else  } //對餘下的子元素挨個排列布局 $(item).css()
; //更新最小列高 arrheight[minindex] += $(item).height() + space; } })
; //由於這裡是利用定位對子元素進行布局，所以要更新父元素的高度 //當然也可以利用浮動對子元素進行布局 var maxheight =0
; for (var
i =0
; i < arrheight.length; i++)  } //設定父元素的高度 $(this).height(maxheight)
; } })
; })(jquery)
;

這裡假設乙個html結構：

lang="zh-cn">
charset="utf-8">
瀑布流案例原始title>
* body
.container
.container > .items
.container > .items > .item
.container > .items > .item > img
.container > .items > .item
:nth-child(3n) > img
.container > .items > .item > p
.container > .btn
.container > .loading
style>
head>
class="container">
class="items">
div>
class="btn loading">正在載入...div>
div>

//定義引擎模板//書寫指令碼

$(function
() ,
beforesend: function
() ,
success: function
(data) 
//每次響應成功後，將從後台返回的page儲存起來
page = data.page;
}});
}  $(".btn").on('click',function
() );
//當頁面滾動到資料底部的時候載入資料
$(window).on('scroll',function
() );
});

瀑布流布局

最近在看瀑布流布局，覺得很神奇，每個模組都可以找到自己應該在的地方，各列齊頭並進，給人一種很high的感覺。一開始自己也想了思路 模組1，模組2，裡面模組float left。結果試了一下，悲劇啊，不同高度的直接就掛了，布局亂了。等高的還可以。然後我又想分類，就是規定幾列，分別把模組順序載入在各個c...

瀑布流布局

很早以前我就想自己學寫一下瀑布流布局，可是由於懶神來找我聊天咯，所以推遲咯很久直到今天我才來寫瀑布流布局。由於鄙人的js還有很大的提公升空間，所以我是先看咯一下那些大神的具體講解和分析，然後才開始著手寫的，收穫那是槓槓的。1 大家都知道要想實現瀑布流，就必須規定每乙個區塊的寬度要一致 2 確定每一排...

瀑布流布局

mark之，蘑菇街，點點網，以及 最新上線的 哇哦 等等，倒是很流行哈 在 即將上線的眾多產品中，你還會大量看到這樣的形式呢。這種布局適合於小資料塊，每個資料塊內容相近且沒有側重。通常，隨著頁面滾動條向下滾動，這種布局還會不斷載入資料塊並附加至當前尾部。所以，我們給這樣的布局起了乙個形象的名字 瀑布...