Кладка с фиксированной шириной и высотой?

я хочу что-то вроде этого

контейнерная коробка имеет фиксированную ширину и высоту

размеры коробки разные, типа 1*1 или 2*1 или 3*3 и... но не больше 4 по ширине и 3 по высоте

цифры на ящиках - это индекс ящиков при загрузке

Я попытался написать алгоритм ширины этих условий

first - поставить item1 на первую позицию (0,0)

второе - первое поле создает 2 позиции: (0,1) и (1,0)

третий - item2 должен выбирать между двумя новыми позициями и помещаться в лучшую позицию для меньшего разрыва

и каждый элемент при размещении создает 2 новые позиции в левом верхнем углу и правом нижнем углу.

также я должен проверить оставшуюся площадь контейнера и области ящиков, чтобы проверить, заполнен ли контейнер или нет

и если контейнер заполнен, создайте новый контейнер и поместите туда остальные элементы

Я нашел несколько примеров того, что мой алгоритм не сработал, но я должен найти решение

возможно, сортировка этих ящиков по площади и пространству - самое простое решение

но мне это не нравится, потому что это из-за дизайна, я имею в виду большие ящики вверху и меньшие ящики внизу :( это нехорошо, плюс я хочу загрузить эти ящики на бесконечную прокрутку, тогда я не знаю, какой у меня следующий размер коробки, поэтому я не могу разместить их в зависимости от области

после того, как я сдался, я проверил все плагины о таком дизайне

как изотоп и каменная кладка, и ванильная кладка, и гридстер, и ...

Я пытался настроить изотоп

ссылка JSfiddle показывает мою попытку ссылка

<a href="#" id="good">Shuffle</a> |
<a href="#" id="bad">Original order (broken)</a>
<div id="container">
   <div class="item w1 h1">1</div>    
   <div class="item w2 h1">2</div>
   <div class="item w1 h2">3</div>
   <div class="item w1 h1">4</div>
   <div class="item w2 h2">5</div>
   <div class="item w2 h1">6</div>
   <div class="item w1 h1">7</div>
   <div class="item w1 h1">8</div>
   <div class="item w1 h2">9</div>
   <div class="item w2 h2">10</div>
   <div class="item w2 h1">11</div>
 </div>​

 #container {
   margin: 0 auto;
   border: 2px solid black;
   height: 430px;
   margin: 20px 0 0 0;}

 .item {
  float: right;
  background: #CCC;
  width: 100px;
  height: 100px;
  margin: 10px;}

 .item.w1 {
   width: 100px;}

 .item.w2 {
   width: 200px;}

 .item.h1 {
   height: 100px;}

 .item.h2 {
   height: 200px}

 .isotope,
   .isotope .isotope-item {
   -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
      transition-duration: 0.8s;}

  .isotope {
    -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      transition-property: height, width;}


  .isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property:    -moz-transform, opacity;
      transition-property:         transform, opacity;}​


$(function(){

$("#good").click(function() {
    $("#container").isotope('shuffle');
    return false;
});

$("#bad").click(function() {
    $("#container").isotope({'sortBy':'original-order'});
    return false;
});

$("#container").isotope({
  layoutMode: 'masonryHorizontal',
  masonryHorizontal: {
    rowHeight: 60
  }
});  });​

но кажется, что нельзя иметь фиксированную ширину и высоту одновременно

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

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

5 рядов, 4 ряда и 3 ряда

мои вопросы:

во-первых, я буду очень рад написать этот алгоритм самостоятельно, поэтому, пожалуйста, помогите мне найти лучшее решение для этого алгоритма в деталях ??

Я пробовал много способов за последние 2 дня

во-вторых, можем ли мы настроить один из этих плагинов так, как я ожидал, и как??