具有動態塊高的類似Pinterest的插件

Question

我想制作一個類似Pinterest風格的頁面，並且每個塊都可以更改高度，並且我只希望它們在其列中重新排列。

例如，加載頁面時，布局可以是：

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

如果用戶單擊一個塊，則其高度會發生變化，理想情況下，它應為：

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

我已經嘗試了Masonry和ShapeShift ，它們的行為相似。 默認情況下，某些塊的高度更改時，所有塊的位置都不會更改。 那Who are you? 將在WoW! 仍然看起來像：

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

我可以手動調用一個函數來重新排列它們（例如：對於ShapeShift， $('.container').trigger("ss-rearrange"); ），但是塊可能會排列到不同的列，這並不理想。

我想知道是否有圖書館，或者應該如何實現？ 當高度改變時，我只需要塊在其當前列中移動。

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進行切換（顯示：無）。 無需調用layout（），元素將保持其位置，如您在問題中所述。