Как разрешить пользователю устанавливать количество столбцов в макете изображения сетки?

Question

Каким образом я мог бы достичь этого макета? У меня будет сетка изображений. Каждое изображение будет одного размера. Я хотел бы масштабировать изображения вверх и вниз на основе пользовательской настройки, которая определяет количество столбцов в сетке. Пользовательская настройка будет храниться в локальном хранилище HTML5.

Я посмотрел на масонство, но мне интересно, может ли это быть излишним, поскольку все изображения одного размера и сетка будет однородной. Масонство позволяет мне определить ширину столбца, которая может получить меня там, где мне нужно, но мне бы понравилось то, что позволило мне определить количество столбцов напрямую. Я также рассмотрел использование 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

Id сделать это следующим образом:

* 
{ 
    -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/