Кто-нибудь знает, как работает компоновка Pinterest.com?

Ответ 1

Проверьте JQuery Masonry, это будет самый простой способ достичь желаемого макета. http://masonry.desandro.com/

Несколько месяцев назад я немного почитал javascript Pinterest, чтобы понять это сам. Короче говоря, они вообще не делают этого с CSS. Они позиционируют все свои ящики/контакты динамически, повторяя их все, вычисляя высоту и опуская ее в нижней части любого столбца с самой короткой высотой в данный момент (добавив к нему высоту окна). В принципе, там нет трюка, это просто Javascript.

Ответ 2

Css не может сделать это так, как вы этого хотите. Javascript, как этот пример, может.

Из-за того, как ведут себя строки с плавающим или встроенным блоком контента, css не подходит для задания. Вам придется динамически создавать вертикальные столбцы контента и размещать их бок о бок, а это значит, что вам нужно будет бороться, чтобы получить текущий контент вверху. На самом деле это было бы больно. Вы также потеряете чувствительность к ширине окна.

Ответ 3

Вы можете прочитать ответ соотечественника Pinterest на более ранний вопрос об этом: как реплицировать полный стек стека pinterest.com

Ответ 4

Теперь вы можете сделать это с помощью css3

.three-col {
   -moz-column-count: 3;
   -moz-column-gap: 20px;
   -webkit-column-count: 3;
   -webkit-column-gap: 20px;
 }

Полное руководство по адресу: http://kmsm.ca/2010/an-almost-complete-guide-to-css3-multi-column-layouts/

Ответ 5

Посмотрев на все варианты, я закончил реализацию макета, подобного Pinterest таким образом:

Все DIV:

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

Это делает их положение в строках лучше, чем когда они плавают.

Затем, когда страница загружается, я повторяю все DIV в JavaScript, чтобы удалить промежутки между ними. Он работает хорошо, когда:

• DIVs не очень отличаются по высоте.
• Вы не возражаете против незначительных нарушений порядка (некоторые элементы, которые были ниже, могут быть подняты выше).
• Вы не против того, чтобы нижняя строка имела разную высоту.

Преимущество этого подхода - ваши HTML-ы имеют смысл для поисковых систем, могут работать с Javascript, отключенным/заблокированным брандмауэром, последовательность элементов в HTML соответствует логической последовательности (более новые элементы до старения). Вы можете видеть, что он работает на http://SheepOrPig.com/news

Ответ 6

Самый простой и простой способ я сделал, это выглядит арматурой. Но я думал об обмене.....

Это три расположения столбцов...

Первый контейнер не добавит к нему высоты. 4-й контейнер примет высоту и верхнее положение 1-го контейнера (т.е. prev().prev().prev())

counter = counter+1;
if(counter > 3){
var getTop = $(this).prev().prev().prev().offset();
var getLeft = $(this).prev().prev().prev().offset();
var getHeight = $(this).prev().prev().prev().height();
var countTPH = getTop.top + getHeight - 20;
$(this).css({"position":"absolute","top":countTPH+"px","left":getLeft.left+"px"});
            }

Я положил prev(), чтобы читатель понял код простой 1

Ответ 7

Эндрюс поражает! Я искал решение и, наконец, получил его... Как писал Эндрю по позиционированию. Вот мой фрагмент JS. Не идеальное, но правильное направление. Спасибо Эндрю!

var tilename = 6;

for (var i = 0; i < document.querySelectorAll('#tiles .t').length; i++) { 
    document.getElementsByClassName("t"+tilename)[0].style.top = document.getElementsByClassName("t"+(tilename-5))[0].offsetHeight + 10;
    tilename += 1;
}

Ответ 8

Простой способ работы: Здесь я написал свои собственные в течение нескольких минут. http://jsfiddle.net/92gxyugb/1/

coffescript

tiles = $('.tiles .t')
container = $('.tiles').width()
width     = $('.tiles .t:first').width()
columns_height = {}
columns   = Math.floor container / width
space     = container % width 
space     = space / (columns-1)

for tile,i in tiles
  column_index = i % columns
  columns_height[column_index] ?= 0
  sp = switch column_index 
    when 0 then 0
    when columns then 0
    else 
      space * column_index
  $(tile).css
    top: columns_height[column_index]
    left: (column_index * width)+sp
  columns_height[column_index] += $(tile).height()+space

max_height = 0
for k,v of columns_height
  if v > max_height  
    max_height = v
$('.tiles').height max_height-space

HTML

<div class='tiles'>
  <div class='t t1'></div>
  <div class='t t2'></div>
  <div class='t t3'></div>
  <div class='t t4'></div>
  <div class='t t5'></div>
  <div class='t t6'></div>
  <div class='t t7'></div>
  <div class='t t8'></div>
  <div class='t t9'></div>
  <div class='t t10'></div>
  <div class='t t11'></div>
  <div class='t t12'></div>
  <div class='t t13'></div>
  <div class='t t14'></div>
  <div class='t t15'></div>
  <div class='t t16'></div>
</div>

CSS

.tiles {position: relative; width: 500px; background: rgb(140,250,250); }
.t { position: absolute; width: 87px; background: rgb(100,100,100); }
.t1 { height: 100px; }
.t2 { height: 140px; }
.t3 { height: 200px; }
.t4 { height: 180px; }
.t5 { height: 120px; }
.t6 { height: 150px; }
.t7 { height: 180px; }
.t8 { height: 200px; }
.t9 { height: 120px; }
.t10 { height: 160px; }
.t11 { height: 210px; }
.t12 { height: 160px; }
.t13 { height: 150px; }
.t14 { height: 150px; }
.t15 { height: 130px; }
.t16 { height: 170px; }