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

【问题标题】：How do I allow the user to set the number of columns in a grid image layout?如何允许用户设置网格图像布局中的列数？
【发布时间】：2014-04-25 21:28:43
【问题描述】：

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

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

这里有一些图片可以帮助我想象我想要什么。在这里，用户选择了 5 列布局。

这里是 4 列和 3 列布局。

【问题讨论】：

标签： javascript css layout jquery-masonry grid-layout

【解决方案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/。

【讨论】：

【解决方案2】：

我会这样做：

*
{
     -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body
{
    margin:0;
    padding: 0px;
}

.gallery
{
    padding: 15px;
    margin:0;
    list-style: none;
    overflow: hidden;
}

.gallery > li
{
    margin: 0px;
    padding: 2.5px 5px;
    float: left;
    text-align: center;
}

.gallery > li img
{
    max-width: 100%;
}

.gallery.items2 > li
{
    width: 50%;
}

.gallery.items3 > li
{
    width: 33.333%;
}

.gallery.items4 > li
{
    width: 25%;
}

.gallery.items5 > li
{
    width: 20%;
}

.gallery.items6 > li
{
    width: 16.666%;
}

一些 jQuery（或 JS）

$("#grid-range").change(function(){
    var griditems = $(this).val();
    $("#gallery").removeClass("items2 items3 items4 items5 items6");
    $("#gallery").addClass("items"+griditems);
});

这个 HTML：

<input type="range" min="2" id="grid-range" max="6" value="2" step="1" name="power" />

<ul id="gallery" class="gallery items2">
    <li><img src="http://www.placehold.it/200x200" /></li>
    <li><img src="http://www.placehold.it/200x200" /></li>
    <li><img src="http://www.placehold.it/200x200" /></li>
    <li><img src="http://www.placehold.it/200x200" /></li>
    <li><img src="http://www.placehold.it/200x200" /></li>
    <li><img src="http://www.placehold.it/200x200" /></li>
    <li><img src="http://www.placehold.it/200x200" /></li>
    <li><img src="http://www.placehold.it/200x200" /></li>
    <li><img src="http://www.placehold.it/200x200" /></li>
    <li><img src="http://www.placehold.it/200x200" /></li>
    <li><img src="http://www.placehold.it/200x200" /></li>
    <li><img src="http://www.placehold.it/200x200" /></li>
    <li><img src="http://www.placehold.it/200x200" /></li>
    <li><img src="http://www.placehold.it/200x200" /></li>
    <li><img src="http://www.placehold.it/200x200" /></li>
    <li><img src="http://www.placehold.it/200x200" /></li>
</ul>

这是一个演示：http://jsfiddle.net/eEnkf/4/

【讨论】：