javascript - 如何允许用户设置网格图像布局中的列数？

Question

有哪些方法可以实现这种布局？我将有一个图像网格。每个图像的大小都相同。我想根据定义网格中列数的用户设置上下缩放图像。用户设置将存储在 HTML5 本地存储中。

我看过 Masonry，但我想知道这是否会有点矫枉过正，因为所有图像的大小都相同，而且网格是统一的。 Masonry 让我定义列宽，这可以让我到达我需要的位置，但我喜欢让我直接定义列数的东西。我也考虑过使用 Flexbox 进行布局，但我不确定如何使用用户可选择的设置更改列数。我希望通过此解决方案尽可能减少开发开销。

这里有一些图像可以帮助形象化我想要的东西。在这里，用户选择了 5 列布局。

这里有 4 列和 3 列布局。

Answer 1

如果您的选项数量已知，那么您可以为每个场景创建一个容器样式。

.five-col .col {
 float: left;
 width: 20%;  
}

并将您的 html 结构为...

<ul class="five-col">
   <li class="col"> image </li>
   ...
</ul>

为每个列布局创建一个新的容器样式，例如。 .four-col .eight-col 并在它们之间切换。

这确实需要您提前知道允许他们选择的列数，但是“n”解决方案可能允许用户创建一些愚蠢的东西，例如 20 多个列，因此提前审查选项有这是优势。

如果您对提供类似功能的框架感兴趣，请查看 http://unsemantic.com/或 http://960.gs/ .