最近正在實習，痛苦的實習日子，不過學到了超多。。。。
前幾天剛好在做網頁的瀑布流布局，本來使用的是masonry.js外掛程式，但倒霉的是這個外掛程式對jquery版本有所限制，公司模板使用的是2.1.0，然而mosonry並不理會這的版本的jquery，任性的很。。無奈之下，用高版本jquery進行替換，結果不幸的是，另一小夥伴在該專案中使用的另乙個外掛程式開始報錯，估計是嫌這個jquery版本太高。。。好的吧，都難伺候，不如自己來寫乙個
昨天老闆檢查說不行，他需要用瀑布流布局，並同時每個item順序不能改變。。好吧，還要改，不過這個版本的還是想在部落格中記錄下來^^
先放成果圖：
原理：先將容器div的position要設定為relation，之後的每個item個都將以absolute的形式安放在容器中，這樣的話item的位置就可以輕鬆用top和left安放。我這個例子中，每個item都是等寬的，這樣難度係數又下降了很多（哈哈。。不等寬的有機會再去實現吧）。安放分兩種，第一種是第一行的那些item，他們top都直接設為0就好，left則是他們的個數乘以他們的寬度；第二種是除去第一行的其他行，他們則是先去找陣列中的最小高度（陣列：放置每一列此時的高度），top就是那最小高度，而left則是陣列下標（也就是第幾列（0,1,2…））
html**：
id="grid">
class="item">div>
class="item">div>
class="item">div>
...div>
css**：
（css**並不全，這要看個人所寫內容決定了，不過重要的都在下面了）
#grid
.item
function
itemwaterfull
() }
return index;
}//放置item
function
putitem
() else
items.eq(i).css("top", items_height[min_index] + margin);
items.eq(i).css("left", min_index * item_width);
items_height[min_index] += item_height + margin; //高度陣列更新}}
$("#grid").css("height", max_height); //最後更新容器高度
}putitem();
}itemwaterfull();
window.onresize = function
() ; //在視窗大小改變後，item重新放置
在最後一行時，若布局仍按則高度最小的安放，就會是布局很難看。所以將最後一行按順序放置就好了^ ^
將 jquery 中的 putitem() 完善，如下：
function putitem() else else
items.eq(i).css("top", items_height[min_index] + margin);
items.eq(i).css("left", min_index * item_width);
items_height[min_index] += item_height + margin; //高度陣列更新}}
}$("#grid").css("height", max_height); //最後更新容器高度
}
其實最後想想，若想實現瀑布流布局，那麼第幾行這種概念就不應該存在，所以完善後的**，在一面只有寥寥幾行是還是可以的，多了恐怕會有事故發生。。。現在網頁瀑布流的存在形式比較多的是可以下拉後動態載入，不過這也面臨著瀏覽器快取過大，頁面載入過慢的問題，所以用幾行形式的瀑布流加上分頁其實也是不錯的選擇。。。
以上所有僅是個人見解，希望大家可以多多指教 ^ ^
jQuery實現瀑布流布局
瀑布流布局要求要進行布置的元素等寬 計算瀏覽器寬度與元素的寬度之比，得到列數 建立陣列，儲存每列元素總高度 each遍歷迴圈各個，判斷是否為第一排，若是，則將元素高度直接加入陣列中，若不是，則定位布置到高度最小的一列，同時更新當前列的總高度。在jquery中，四種寬度 this is a parag...
實現瀑布流布局
瀑布流，又稱瀑布流式布局。是比較流行的一種 頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷載入資料塊並附加至當前尾部，瀑布流的主要特性便是錯落有致，定寬而不定高的設計讓頁面區別於傳統的矩陣式布局模式。主體思路是記錄每一列的高度，父容器相對定位，成員絕對定位，利用to...
jQuery實現動態瀑布流布局效果
今天在tumblr上看到其瀑布流布局，如下圖，覺得很有意思便研究了下，發現tumblr使用position absolute布局的。結構很簡單，具體請參考底部的例項。先上全部js function items var itemwidth 320 var itemtpl tpl falls item ...