gpt4 book ai didi

javascript - 具有动态 block 高度的类似 Pinterest 的插件

转载 作者:太空宇宙 更新时间:2023-11-03 18:30:34 25 4
gpt4 key购买 nike

我想制作一个类似 Pinterest 风格的页面,每个 block 可能会改变高度,我希望它们只在其列中重新排列。

例如,当页面加载时,布局可能是:

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

如果用户点击一个 block ,它的高度会发生变化,理想情况下它应该是这样的:

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

我试过 MasonryShapeShift ,两者的行为相似。默认情况下,当某些 block 的高度发生变化时,所有 block 的位置都不会发生变化。所以 Who are you? 将在 WoW! 下,它仍然看起来像:

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

我可以手动调用一个函数来重新排列它们(例如:$('.container').trigger("ss-rearrange"); 对于 ShapeShift),但是 block 可以排列成不同的列,这是不理想的。

我想知道是否有图书馆或者我应该如何实现?我需要 block 在高度变化时仅在其当前列中移动。

最佳答案

(1) 查看 masonry 的文档:

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-columns 那样更改列,您应该能够使用简单的 float 容器。不过,您必须自己对内容进行排序。在您的情况下,这可能是最好的解决方案,因为所有其他方法都应该根据元素的大小重新评估元素的位置。

(4) 如果您不介意重叠元素,您可以使用砌体单元并在内部切换一个隐藏的 div(显示:无)。在不调用 layout() 的情况下,元素将像您在问题中描述的那样保持其位置。

关于javascript - 具有动态 block 高度的类似 Pinterest 的插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19919428/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com