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

Question

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

我看过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/。

Answer 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/