Использовать бутстрап-сетку с переменным количеством ячеек

У меня есть приложение для фотоальбома, где пользователь может загружать до 50 изображений. Я хочу, чтобы изображения отображали 4 изображения подряд. Фото альбом динамический, что означает, что пользователь может добавлять и удалять изображения через ajax.

Как можно использовать загрузочную сетку, если ячейки добавлены/удалены без необходимости постоянно изменять элементы и строки DOM?

Например, если пользователь загружает существующий фотоальбом с 5 картинками, сетка бутстрапа выглядит следующим образом:

<div class="row">
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
</div>

<div class="row">
   <div class="col-md-3"> a bunch of html here </div>
</div>

Если пользователь удалит изображение №2, сетка будет (нет 2-й строки, 5 элементов будут смещены на 4-й элемент)

<div class="row">
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
</div>

Затем пользователь добавляет 2 новых изображения (через ajax), требуется новая строка и еще 2 столбца.

<div class="row">
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
</div>

<div class="row">
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
</div>

Может ли bootstrap отзывчивый дизайн сделать это без строк или мне просто нужно использовать плавающие div? Имейте в виду, что эти столбцы все добавлены/удалены с помощью ajax (за исключением начальной загрузки страницы), поэтому я манипулирую DOM (строки/столбцы). Повторное вычисление строк/столбцов для каждого изменения было бы болью.

Ответ 1

Во-первых, чтобы прямо ответить на ваш вопрос, вы можете просто поместить все столбцы в одну строку.

<div class="row">
    <div class="col-md-3"> <img src="1"> </div>
    <div class="col-md-3"> <img src="2"> </div>
    <div class="col-md-3"> <img src="3"> </div>
    <div class="col-md-3"> <img src="4"> </div>
    <div class="col-md-3"> <img src="5"> </div>
    ...
    <div class="col-md-3"> <img src="50"> </div>
</div>

Каждый 4-й элемент (так как сетка составляет 12 столбцов, и мы используем 3 столбца ширины сетки = 4 столбца). Кроме того, для этой техники всегда требуются столбцы с одинаковой высотой, или ваши столбцы не будут завершаться, как ожидалось. Поэтому, если ваши снимки имеют разные размеры, и вы не масштабируете их в фиксированной высоте, у вас будут проблемы.

Это не Bootstrap "незаконно" делать с выше. Если это факт, вы увидите, что сайт Bootstrap делает это, применяя несколько столбцов для каждого размера экрана в одном столбце, как этот пример, с сайта Bootstrap:

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
    <div class="col-xs-6 col-sm-6 col-md-4">.col-xs-6 .col-sm-6 .col-md-4</div>
</div>
<div class="row">
    <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
    <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
    <!-- Optional: clear the XS cols if their content doesn't match in height -->
    <div class="clearfix visible-xs"></div>
    <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
</div>

Если вышеописанное считается "Extra Small" (-xs-), первый столбец в первой строке будет охватывать всю ширину, а второй столбец будет охватывать только половину ширины.

Во второй строке вы видите аналогичную вещь. В "Extra Small" размер будет иметь три столбца ширины "505", которые дадут вам две строки.

Кроме того, вы можете увидеть пример использования столбцов Clearfix, если строки столбцов не совпадают по высоте. Они рекомендуют вставлять пустой div в clearfix.

Я бы также подумал о том, чтобы использовать список и рекомендовать не передумывать его (что я нахожу при использовании Bootstrap).

В этом случае рассмотрим что-то вроде этого:

<ul id="image-list" class="row">
    <li class="col-sm-3"><img src="1"></li>
    <li class="col-sm-3"><img src="2"></li>
    ...
    <li class="col-sm-3"><img src="n-1"></li>
    <li class="col-sm-3"><img src="n"></li>
</ul>

Я надеюсь, что это поможет!

Приветствия

Ответ 2

Просто чтобы дополнить jmbertucci ответ, мне удалось выработать несколько css для решения проблемы изображений с разной высотой. Css должен быть примерно таким:

  .thumbnail {
    height: 50px;
  }
  .thumbnail img {
    display: block;
    width: auto;
    height: 100%;
  }

Просто добавьте класс миниатюр к родительскому элементу каждого тега изображения, и вы получите хорошие, даже ячейки, независимо от различий в высоте.