Tag: Freewall

Dynamic grid layout using Freewall Javascript

Recently I have created gallery page. And I wanted to have something cool looking and save space for thumbnails.

Not like this:

Not organized gallery layout

But instead like this dynamic layout style:

Dynamic block layout using Freewall

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”