Pinterest-подобный плагин с динамической высотой блока

Question

Я хочу сделать страницу стиля Pinterest, и каждый блок может изменить высоту, и я хочу, чтобы они были перегруппированы только в его столбце.

Например, когда страница загружена, макет может быть:

------------------------------------ 
|   |    |  | 
|   |    |  | 
|---------|    |  | 
|Hello! I |    |  | 
|am Alice.|----------------|  | 
|---------|    |  | 
|WoW!  |    |  | 

Если пользователь нажмет на одном блоке, он изменяется по высоте и в идеале она должна быть:

------------------------------------ 
|   |    |  | 
|   |    |  | 
|---------|    |  | 
|Hello! I |    |  | 
|am Alice.|----------------|  | 
|Who are |    |  | 
|you?  |    |  | 
|---------|    |  | 
|WoW!  |    |  | 

I «Пробовали с Masonry и ShapeShift, оба они действуют аналогичным образом. По умолчанию положение всех блоков не изменяется при изменении высоты некоторых блоков. Так Who are you? будет под WoW! и она по-прежнему выглядит следующим образом:

------------------------------------ 
|   |    |  | 
|   |    |  | 
|---------|    |  | 
|Hello! I |    |  | 
|am Alice.|----------------|  | 
|---------|    |  | 
|WoW!  |    |  | 

можно вручную вызвать функцию, чтобы изменить их (например: $('.container').trigger("ss-rearrange"); для Shapeshift), но блоки могут быть расположены в другой колонке, которая не является идеальным ,

Я хочу знать, есть ли библиотека или как мне это достичь? Мне нужно, чтобы блоки двигались только в текущем столбце при изменении высоты.

Answer 1

(1) Посмотрите документацию кирпичной кладки в:

var container = document.querySelector('#layout-demo .masonry'); 
var msnry = new Masonry(container, { 
    columnWidth: 60 
}); 

eventie.bind(container, 'click', function(event) { 
    // don't proceed if item was not clicked on 
    if (!classie.has(event.target, 'item')) { 
    return; 
    } 
    // change size of item via class 
    classie.toggle(event.target, 'gigante'); 
    // trigger layout 
    msnry.layout(); 
}); 

msnry.layout() является то, что вы хотите сделать.

Источник: http://masonry.desandro.com/methods.html

См codepen: http://codepen.io/johannesjo/pen/kFixz

(2) Вы также можете попробовать использовать CSS-столбцы: http://www.webdesignerdepot.com/2013/03/how-to-use-css3-columns/

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

(4) Если вы не против перекрытия элементов, вы можете использовать ячейки кладки с переключением скрытого div внутри (с дисплеем: none). Без вызова layout() элемент сохранит свою позицию, как вы описали в своем вопросе.