瀑布流布局

mark之，蘑菇街，點點網，以及**最新上線的「哇哦」 等等，倒是很流行哈~ 在**即將上線的眾多產品中，你還會大量看到這樣的形式呢。

這種布局適合於小資料塊，每個資料塊內容相近且沒有側重。通常，隨著頁面滾動條向下滾動，這種布局還會不斷載入資料塊並附加至當前尾部。所以，我們給這樣的布局起了乙個形象的名字 — 瀑布流式布局。

1.絕對定位：一種最優秀的方案，方便新增資料內容，視窗變化，列數/資料塊都會自動調整;

$(window ).on("load",function());

wate***ll();}})

}) var $lastimgbox=$('#main>div').last();

var lastimgboxdis=$lastimgbox.offset().top+math.floor($lastimgbox.outerheight()/2);

var scrolltop=$(window).scrolltop();

var documenth=$(window).height();

return (lastimgboxdis>scrolltop+documenth)? true: false;

}

$(document).ready(function())

$(document).load(function())

load事件必須等到網頁中所有內容全部載入完畢之後才被執行。如果乙個網頁中有大量的的話，則就會出現這種情況：網頁文件已經呈現出來，但由於網頁資料還沒有完全載入完畢，導致load事件不能夠即時被觸發。

其實這段**的意思就是動態的生成上文所說的html結構。

jq的各種寬度的比較

width(): 獲取第乙個匹配元素內部寬度（不包括補白 padding 和邊框 border）。

innerwidth() 獲取第乙個匹配元素邊框以內的寬度（包括補白 padding ，不包括 邊框border）。

outerwidth() 獲取第乙個匹配元素外部寬度（預設包括補白 padding和邊框border ）。此方法對可見和隱藏元素均有效。

outerwidth(true) 獲取第乙個匹配元素外部寬度（預設包括補白 padding和邊框border和外邊距margin ）。此方法對可見和隱藏元素均有效。

瀑布流布局

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

瀑布流布局

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

瀑布流布局

flex 實現瀑布流需要將最外層元素設定為 display flex，即橫向排列。然後通過設定 flex flow column wrap 使其換行。設定 height 100vh 填充螢幕的高度，來容納子元素。每一列的寬度可用 calc 函式來設定，即 width calc 100 3 20px ...