有誰能解答一下tumblr網站首頁排版是怎麼實現的？如何讓長度不同的內容緊湊在一起？

01-08

我的想法是，如果只分為左右兩欄，則2個div，一個左浮動，一個右浮動，從資料庫讀取的內容按id奇偶分配到左右兩欄，可這樣貌似容易出現左右兩欄長度相差太多的缺陷

3/26
今天在淘寶UED找到了基本思路：瀑布流布局淺析
又剛好慕課網有這個教程：瀑布流布局簡介

自己試著實現了一下：碎片時光
用的是js控制來絕對定位的方法

純CSS實現的方法也是很多種示例了，這裡提供一下相關鏈接：

1、Three Super Easy Ways to Pull Off a Masonry Layout

2、CSS-Only Pinterest Style Columns Layout

3、 Create a Responsive CSS-only Masonry layout

4、Pure CSS masonry layout

5、 CodePen - Pure CSS Masonry Layout

6、vah7id/CssMasonry · GitHub

7、http://sickdesigner.com/masonry-css-getting-awesome-with-css3/ 主要使用了CSS中的column屬性(CSS3 Multi-columns 之跨列)

8、demosthenes.info （使用的是Flexbox layout:flexbox | 博客自由標籤）

9、47Admin - Bootstrap Admin Skin （使用的是inline-block）

其中1~7使用的是column，8使用的是flexbox layout，9使用的是inline-block

外面常見的是js: jQuery製作瀑布流

瀑布流標準做法比較粗暴的讓伺服器返回圖片高算每列高度最短的填一個再算遞歸即可。絕對定位哦……

瀑布流布局吧，可以用css也可以用js都有現成插件的，12年那個時間段很火的，現在還好吧，