如何复制 pinterest.com 的绝对 div 堆栈布局

我希望复制 Pinterest.com 的 div 布局，特别是如何调整列数以适应浏览器大小的调整，并且垂直堆叠不依赖于相邻列的高度。源代码显示每个 div 都是位置绝对值。一位联合创始人回复了一篇 Quora 的帖子，说这是通过自定义 jQuery 和 CSS 完成的。我希望结果从左到右排序。如果你能提供任何方向让我亲自去做，我将不胜感激。

56298 次浏览
小开

They split entities by columns with ids (bad solution... better use class names) and then calculate positions by column groups

小开

I wrote the Pinterest script. The ID's are unrelated to the layout, and are used for other interaction-related JS. Here's the base of how it works:

Beforehand:

  • Absolutely position the pin containers
  • Determine column width
  • Determine margin between columns (the gutter)

Setup an array:

  • Get the width of the parent container; calculate the # of columns that will fit
  • Create an empty array, with a length equaling the # of columns. Use this array to store the height of each column as you build the layout, e.g. the height of column 1 is stored as array[0]

Loop through each pin:

  • Put each pin in the shortest column at the moment it is added
  • "left:" === the column # (index array) times the column width + margin
  • "top:" === The value in the array (height) for the shortest column at that time
  • Finally, add the height of the pin to the column height (array value)

The result is lightweight. In Chrome, laying out a full page of 50+ pins takes <10ms.

小开

We released a jQuery plugin because we got the same question several times for Wookmark. It creates exactly this type of layout. View it here - Wookmark jQuery plugin

小开
最佳答案

You could also check on the jQuery Plug-in Masonry, for this kind of functionality.

小开

You could use floats and size your div widths using percentages together with min-width to force divs to automatically fall of once minimum width is reached? Its the way we got it working on http://www.goldtree.co.za/work

小开

Why dont you try this, simple js stuff

http://vanilla-masonry.desandro.com/index.html

Or even this with jQuery and having scroll loading as well.

http://masonry.desandro.com/index.html

小开

Having looked at all options, I ended up implementing the layout similar to Pinterest in this way:

All DIVs are:

div.tile {
display: inline-block;
vertical-align: top;
}

This makes them position in rows better than when they are floated.

Then when the page is loaded, I iterate all DIVs in JavaScript to remove gaps between them. It works acceptably well when:

  1. DIVs are not very different in height.
  2. You don't mind some minor violations of ordering (some elements that were below can be pulled up above).
  3. You don't mind the bottom line being of different height.

The benefit of this approach - your HTML make sense for search engines, can work with JavaScript disabled/blocked by firewall, the sequence of elements in HTML matches the logical sequence (the newer items before older)


提交答案