I am working on creating a grid of square divs inside a container with variable height and width.
The number of square div's is predetermined. All square divs will have images with the same dimensions (similar to the example). They should align left and wrap around at the end of one row to the next. I need an algorithm to calculate the number of columns, rows, and their maximum size to fit them all into the parent div.
Can someone provide me with a suggestion on how to determine the maximum size of the squares so that each square fits within the parent container? It seems like I am facing a packing problem here.
The current code I am using to calculate the image height is:
var imageHeight = Math.floor((maxHeight - imageMargin) / 3);
For more detailed code, you can check out this working example on JSFiddle
var $container = $('.container');
var $square = $('.square');
adjustSquares();
function adjustSquares() {
// CALCULATE MAXIMUM CONTAINER HEIGHT (for instance, half of window height)
$container.removeAttr('style');
var maxHeight = Math.floor($(window).height() / 2);
$container.css({
'max-height': maxHeight + 'px',
'overflow': 'hidden'
});
// CALCULATE MAXIMUM IMAGE HEIGHT (based on the number of squares and the maximum container height)
var imageMargin = $square.outerWidth(true) - $square.width();
var imageHeight = Math.floor((maxHeight - imageMargin) / 3); // How to calculate this image height?
$square.find('img').width(imageHeight);
$square.find('img').height(imageHeight);
// CALCULATE CONTAINER WIDTH (to determine the maximum number of squares per row and center them)
var maxWidth = $container.width();
var blockWidth = $square.outerWidth(true);
var squaresPerRow = Math.floor(maxWidth / blockWidth);
$container.width(squaresPerRow * blockWidth);
}
var resizeTimeout;
$(window).resize(function() {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(adjustSquares, 200);
});body {
padding: 0;
margin: 0;
}
.container {
width: 100%;
margin: 0 auto;
font-size: 0; /* REMOVE inline-block SPACE */
}
.square {
display: inline-block;
margin: 5px;
}
img {
max-width: 100%;
height: auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="square">
<img src="http://lorempixel.com/100/100" alt="square" />
</div>
<div class="square">
<img src="http://lorempixel.com/100/100" alt="square" />
</div>
<div class="square">
<img src="http://lorempixel.com/100/100" alt="square" />
</div>
<div class="square">
<img src="http://lorempixel.com/100/100" alt="square" />
</div>
<div class="square">
<img src="http://lorempixel.com/100/100" alt="square" />
</div>
<div class="square">
<img src="http://lorempixel.com/100/100" alt="square" />
</div>
<div class="square">
<img src="http://lorempixel.com/100/100" alt="square" />
</div>
<div class="square">
<img src="http://lorempixel.com/100/100" alt="square" />
</div>
<div class="square">
<img src="http://lorempixel.com/100/100" alt="square" />
</div>
<div class="square">
<img src="http://lorempixel.com/100/100" alt="square" />
</div>
<div class="square">
<img src="http://lorempixel.com/100/100" alt="square" />
</div>
<div class="square">
<img src="http://lorempixel.com/100/100" alt="square" />
</div>
<div class="square">
<img src="http://lorempixel.com/100/100" alt="square" />
</div>
</div>
</body>