Recently I have created gallery page. And I wanted to have something cool looking and save space for thumbnails.
Not like this:
But instead like this dynamic layout style:
The images are keep moving and save space while I am resizing. Isn’t it cool?
There’s couple of Javascript developed for dynamic layout: Freewall, Mansonry, uikit dynamic grid, Shapeshift and etc.
I liked Freewall the most, it is simple to use.
Here’s an example page that I have created.
It is very easy to use. I put setTimeout() function and trigger function again because there’s overlapping image problem. I guess it is because the images are not loaded fully and it doesn’t scale the size of each blocks.
If it is just html block then we don’t need.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Freewall Testing</title> <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="freewall.js"></script> <style type="text/css"> body { background: rgba(231, 231, 231, 0.43);} .free-wall { margin: 15px; } .brick { width: 221.2px; } .info { padding: 15px; color: #333; } .brick img { margin: 0px; padding: 0px; display: block; } </style> </head> <body> <div class="free-wall" id="freewall"> <?php foreach($vars['items'] as $item){ ?> <div class="brick"> <img src="<?php echo $item['src']?>" width="100%"> </div> <?php } ?> </div> <script type="text/javascript"> var wall = new Freewall("#freewall"); wall.reset({ selector: '.brick', animate: true, cellW: 200, cellH: 'auto', onResize: function() { wall.fitWidth(); } }); $( document ).ready(function() { wall.fitWidth(); $(window).trigger("resize"); setTimeout(function(){ $(window).trigger("resize"); }, 700); }); </script> </body> </html>
“Flows like water. Sweet like honey”