具有动态块高度的类似Pinterest的插件

Pinterest-like plugin with dynamic block height

本文关键字：Pinterest 插件 高度 动态      更新时间：2023-09-26

我想制作一个类似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!     |                |       |

我可以手动调用一个函数来重新排列它们（例如：$('.container').trigger("ss-rearrange");用于 ShapeShift），但块可能会排列到不同的列，这并不理想。

我

想知道是否有图书馆或我应该如何实现这一点？当高度发生变化时，我只需要块在其当前列中移动。

（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

请参阅代码笔：http://codepen.io/johannesjo/pen/kFixz

（2）你也可以尝试使用css-columns：http://www.webdesignerdepot.com/2013/03/how-to-use-css3-columns/

（3）如果你不想像砖石或css列那样改变列，你应该能够使用简单的浮动容器。 不过，您必须自己对内容进行排序。在您的情况下，这可能是最好的解决方案，因为所有其他方法都应根据元素的大小重新评估元素的位置。

（

4）如果您不介意重叠元素，则可以使用砖石单元格在内部切换隐藏的div（显示：无）。在不调用 layout（） 的情况下，元素将保持其位置，就像您在问题中描述的那样。

相关文章：