css或javascript中的自动排列框

Question

我正在创建一个模板，我想知道如何在css或javascript中自动排列多个高度框。

我已经尝试更改CSS和Javascript，我也在Google上搜索过，但我还没有运气。

我在这里给图片清楚地知道我正在寻找的东西我在这张图片中展示......

请在重播我需要的内容之前检查图像

谢谢

Answer 1

你看过像Masonry这样的图书馆吗？

http://masonry.desandro.com/

Answer 2

请查看现有工具，例如Shuffle和masonry。 （Shuffle实际上使用砖石。）

Answer 3

你没有提供太多细节，所以我的回答也不多。看起来你正在寻找CSS Columns。 Tables with table-layout: fixed;也可能有用。这些布局称为Pinterest Layouts或马赛克布局

Answer 4

要自动排列不同高度的元素，可以使用一堆不同的库。其中一个库是Masonry。

试试下面的代码：

new Masonry(document.getElementById('container'), {
    itemSelector: '.item'
});

.item {
    width: 25%;
}
.one {
    background-color: orange;
    height: 100px;
}
.two {
    background-color: green;
    height: 150px;
}
.three {
    background-color: blue;
    height: 200px;
}

<div id="container">
    <div class="item one"></div>
    <div class="item two"></div>
    <div class="item one"></div>
    <div class="item two"></div>
    <div class="item three"></div>
    <div class="item three"></div>
    <div class="item one"></div>
    <div class="item two"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.0/masonry.pkgd.min.js"></script>

Answer 5

我有好消息和坏消息，接着是更多好消息。

好消息是，flexbox正是你可以开箱即用的东西。不需要js - 您将流向设置为列模式，然后打开包装。我提供了一个小提琴：

https://jsfiddle.net/cev0ug3y/

坏消息是，要实现这一点，你必须提前知道高度。如果您要显示一小组固定的项目，或者滚动设置为水平，这很好，但是当您想要类似Pinterest的无限滚动时，它就不那么好了。

好消息是，在你之前有很多人使用javascript解决了这个问题 - 我真的建议使用其中之一。刷新答案，我看到Masonry和Shuffle已被建议，所以我会把我最喜欢的一个（由编写砌体的人）扔进去：Isotype - http://isotope.metafizzy.co/layout-modes.html

如果你还想自己动手，那么这个想法非常简单：

• 初始化一系列前缘，记录显示器每列的垂直高度。你将把它初始化为零。
• 对于您需要放置的每件物品，找到与其邻居一起可以容纳您物品的最小前沿。
• 将所有参与列的前沿设置为您选择的前沿的值加上项目的高度。

您将使用position: absolute执行此操作。如果您不知道图像的高度，则可能会在放置每个项目之前等待加载完成。如果您的物品宽度不同，您的显示器上可能会有孔，并且有一些技术可以最大限度地减少这种情况，但它看起来并不像您在这里所做的那样。尽管存在所有这些警告，但这应该让你开始，但我仍然会看第三方图书馆的灵感。