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

<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>

Code (markup):

JS

  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();

Code (markup):

CSS

* {
      -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;
    }

Code (markup):

Thanks

 

There's one thing I don't understand with web developers nowadays.
Having an algorithm generate bad markup is pretty much to expect as it doesn't have any brains or notion of aesthetics.
But why would YOU, a HUMAN web developer, imitate a VERY BADLY designed wysiwyg kind of program?

I mean this:

<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>

HTML:

...NO.

As far as the method goes, it's not the best. It would be better if you could actually see a functioning example. Give me some time, I'll write something down for you.

 

i appreciate your comment, thank you. i must say it is quite alarming that whenever i post a question that requires a technical solution, the responses are always criticizing design aspects, which to me are separate issues!

there is a function for variation of designs, otherwise all pages would work the same way: who wants cities with exactly the same buildings?

enough of that, yes. i was trying to manipulate the "algorithm", but my limited knowledge let me to quick fix. it would be great if you can offer a "way out". thanks

 

You may want to take a step back and think about that. They are NOT seperate issues if you are building a website! The two rules of GOOD design and development:

1) Content dictates markup,
2) Content + markup + accessibility layout.

Much less, how can you even create a "technical answer" without even having semantic markup of actual content or a reasonable facsimile of future content. You're screwing around with appearance before you even have anything resembling content in place!

Presentational vague classes to say height and width? classes on everything when there's a perfectly good parent container? vague/meainginless classes? Layout concepts that flat out will not allow flow to do it's job? What's with the generated content clearing asshattery? Much less the scripttardery to try and control layout -- any time you need JavaScript much less some halfwit bloated retard mouth-breathingly dumbass drooling moron "framework" for layout? You're doing something wrong. ANYONE telling you otherwise has ZERO huffing business even opening their mouth on the topic, and needs a good swift kick in the crotch!

What's your responsive plan for this? Your fill plan for larger displays to reduce the need for scrolling? Where's your ACTUAL content?

Now, that said... have you considered alternating floats?

CSS3 only but:

.isotope+div { float:left; }
.isotope+div:nth-child(even) { float:right; }

Alternating floats will stack upwards. You then only need to set the widths to 50% to make sure they don't overlap left and right or stack funny -- though I'm assuming you'd be replacing that placeholder text with IMG tags since you have ZERO malfing business declaring a fixed height on anything with content in it, PARTICULARLY in pixels unless you don't know the first damned thing about accessibility.

You come in with something that from a development point of view is unsound gibberish artsy-fartsy ignorant "designer" BS, and you then wonder why people go after the design side? You just pulled the equivalent of "Doctor, doctor, it hurts when I do this!"

Well don't do that!

 

i hear you.

unless of course the content will fit inside these divs (ie. images/text clipped/resized by the boundary of the div)

isotrope will just fill any format larger or smaller

i will look into this.

yes i'll admit that i am ignorant, but I AM trying to embark on an autodidactic journey to get over this.

nonetheless, thanks

 

Yeah, I looked it up as I'd never heard of it, and it looks like the type of artsy scripttard BS I'd never put on a website in the first place, since it's a giant middle finger to users on the accessibility front and WAY too easily abused by people who don't know any better and just start plugging endless crap into a page. It might be 'cute' in a couple corner cases, but since it's reliant on the ignorant dumbass mouth-breathing halfwit bullshit known as jQuery, I sure as shine-ola would never use it by choice.

 

yep. that would be me.

 

Oh, and sorry for being so frank... In case you couldn't tell, I'm SUCH a fan of frameworks and off the shelf solutions. They're just nube-predating scam bait for people who aren't willing to take the time to use HTML or CSS properly...

Well, that or people who don't know enough about accessibility to me making "designs" -- see 99% of the people who call themselves "designers" when the only thing they know is dicking around in Photoshop.

 

Check this out. Speaking of loading sporadically. Not sure who the author is: http://jsfiddle.net/2z4rK/42/