I need something like this
container container has a fixed width and height
box sizes are different, for example, 1 * 1 or 2 * 1 or 3 * 3 and ... but not more than 4 in width and 3 in height
the numbers in the boxes is the index of the fields when loading
I tried to write an algorithm for the width of these conditions
first - put item1 in the first position (0,0)
second - the first field creates 2 positions: (0,1) and (1,0)
thirdly - item2 must choose between two new positions and fit in a better position for less clearance
and each element when placed creates 2 new positions in the upper left corner and in the lower right corner
I also have to check the remaining container area and the box area to check if the container is full or not.
and if the container is full, create a new container and put the rest of the items there
I found some examples that my algorithm failed, but I have to find a solution
perhaps sorting these fields by area and space is the easiest solution
but I don’t like it because it pecks the design, I mean the big boxes at the top and the smaller boxes at the bottom :( this is not good plus I want to load these boxes in infinte scroll, then I don’t know what my next box size is so I can’t place them based on area
after i got up i checked all the plugins about this kind of design
like isotope, masonry and vanilla masonry and retina and ...
I tried to adjust the isotope
JSfiddle link shows my attemp link
<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 } }); });
but it doesn't seem to have a fixed width and height at the same time
This is important to me because I want to keep this equal margin between the fields and not change
I also want to determine the height of the browser and change the height only with these three states, and not with a variable height
5 lines, 4 lines and 3 lines
my questions:
first - will I be so happy to write this algorithm myself so please help me find the best solution for this algorithm in detail ??
I tried many ways in the last 2 days
second - can we configure one of these plugins, as I expected, and how?