Thread: Sporadic div positioning with Jquery + Isotrope

Hello all,

I am currently using jquery + "isotrope" to make an image gallery where images can be filtered using "data-filters". But "Isotope" uses grids to organise the divs but I would like something like the following image which is kind of free of a grid or random positioning. Do you know how I can tweak "Isotrope" to make it appear more loose or free from some masonry or grid-like system?



The closest I got was the attempt below, but as you can see in the jsfiddle, there is no gutter between the divs and it still looks very much like a grid.

Fiddle: https://jsfiddle.net/postcolonialboy/w31L4wkw/

HTML

Code:

<div class="isotope">
    	<div class="item cat-2 height2 width2 cat-4">width3</div>
    	<div class="item height2 width2 cat-4">height2</div>
    	<div class="item cat-2">normal</div>
    	<div class="item cat-1 height3 width3">height3</div>
    	<div class="item cat-2 cat-4 height3 width3">normal</div>
    	<div class="item cat-2">normal</div>
    	<div class="item cat-2 cat-3">normal</div>
    	<div class="item height2 width2">width2 height3</div>
    	<div class="item height2 width2">width2</div>
    	<div class="item height2 width2 cat-4">width2</div> 
    	<div class="item cat-1 height2 width2">height2</div>
    	<div class="item cat-2 cat-3 height3 width3">width3</div>
    	<div class="item cat-3 height3 width3">height3</div>
    	<div class="item cat-3 width2 height2 cat-1">width2 height2</div>
    	<div class="item height2 width2 cat-4 cat-1">width2</div>
    	<div class="item height2 width2 cat-3">height2</div> 
    	<div class="item cat-1 cat-3 height3 width3">width3</div>  
    </div>

JS

Code:

  jQuery(window).on("load resize", function(e) {
          var $container = $('.isotope'),
            colWidth = function() {
              var w = $container.width(),
                columnNum = 1,
                columnWidth = 0;
              //Select what will be your projects columns according to container width
              if (w > 1040) {
                columnNum = 6;
              } else if (w > 850) {
                columnNum = 5;
              } else if (w > 768) {
                columnNum = 4;
              } else if (w > 480) {
                columnNum = 3;
              } else if (w > 300) {
                columnNum = 2;
              }
              columnWidth = Math.floor(w / columnNum);
    
              //Default item width and height
              $container.find('.item').each(function() {
                var $item = $(this),
                  width = columnWidth,
                  height = columnWidth;
                $item.css({
                  width: width,
                  height: height
                });
              });
    
              //2.4x width item width and height
              $container.find('.width2').each(function() {
                var $item = $(this),
                  width = columnWidth * 2.4,
                  height = columnWidth;
                $item.css({
                  width: width,
                  height: height
                });
              });
    
              //2.4x height item width and height
              $container.find('.height2').each(function() {
                var $item = $(this),
                  width = columnWidth,
                  height = columnWidth * 2.4;
                $item.css({
                  width: width,
                  height: height
                });
              });
    
              //2.4x item width and height
              $container.find('.width2.height2').each(function() {
                var $item = $(this),
                  width = columnWidth * 2.4,
                  height = columnWidth * 2.4;
                $item.css({
                  width: width,
                  height: height
                });
              });
    
    
    
              //3.3x width item width and height
              $container.find('.width3').each(function() {
                var $item = $(this),
                  width = columnWidth * 3.3,
                  height = columnWidth;
                $item.css({
                  width: width,
                  height: height
                });
              });
    
              //3.3x height item width and height
              $container.find('.height3').each(function() {
                var $item = $(this),
                  width = columnWidth,
                  height = columnWidth * 3.3;
                $item.css({
                  width: width,
                  height: height
                });
              });
    
              //3.3x item width and height
              $container.find('.width3.height3').each(function() {
                var $item = $(this),
                  width = columnWidth * 3.3,
                  height = columnWidth * 3.3;
                $item.css({
                  width: width,
                  height: height
                });
              });
    
              return columnWidth;
            },
            isotope = function() {
              $container.isotope({
                resizable: true,
                itemSelector: '.item',
                masonry: {
                  columnWidth: colWidth(),
                  gutterWidth: 15,
                }
              });
            };
    
          isotope();

CSS

Code:

* {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box
    }
    
    body {
      font-family: "Helvetica Neue", sans-serif;
      max-width: 95%;
      margin: 0 auto;
      padding-top: 5%;
    }
    
    .isotope {
      background: 0;
      max-width: 95%;
      margin: 0 auto
    }
    
    .isotope:after {
      content: '';
      display: block;
      clear: both
    }
    
    .item {
      float: left;
      width: 332px;
      height: 213px;
      background: 0;
      border: 1px solid black
    }
    
    .item.width2 {
      width: 321px;
    }
    
    .item.height2 {
      height: 342px;
    }
    
    .item.width3 {
      width: 472px;
    }
    
    .item.height3 {
      height: 431px;
    }

Thanks