javascript - Randomised variable grid -

i'm working on website needs have variable grid. it's based on tumblr unfortunately can't use php solve our problem. want make posts wider other, should done randomly , photo posts should excluded this.

the current markup each of text blocks is:

<article class="post text cf post-3">   <a href="#">     <div class="post-overview-header" style="background-image: url(https://31.media.tumblr.com/d4134dd4d2c48674e311ca0bb411d5cc/tumblr_inline_n3v11hgji61s3vyc9.jpg); background-size: cover; background-position: 50% 0%; background-repeat: no-repeat no-repeat;">         <div class="hoveroverlay"></div>         <div class="post-overview-title">             <span class="post-title">posts adden</span>             <span class="post-date">                  april 11, 2014                  </span>             <span class="post-readingtime"><span aria-hidden="true" class="icon-readingtimesmall"></span><span class="eta">3 min</span></span>         </div>     </div>     <div class="post-content">         <p>this post's content</p>     </div>   </a> </article> 

my best shot @ grid following code wasn't able check whether wide post on previous row on same level because looks odd want that.

var = 0; $('.post').each(function() { // determine whether count has reseted or not   if(i === 3){     = 1;   }else{     i++;   }   $(this).addclass('post-' + i); // add 1 each post named grid work   if($(this).is(':first-of-type') || $(this).hasclass('text')){     $(this).not('.post-3').addclass('wide');   }   // in case first of 2 posts wide 1   if($(this).is('.wide.post-1')){     = 2;   } }); 

desired effect: http://c.davey.im/uzq9

current effect http://c.davey.im/uzsv

thanks in advance!

thought i'd have play , have come this: http://jsfiddle.net/andyface/7kcgj/

think job you're after.

var = 0,     prevrowwide = 0;  $('.post').each(function () {      //generate post positioning index     === 3 ? = 1 : i++;      // randomly generate value if post should wide or not     // cache current object, aidds performance     var addwide = boolean(math.round(math.random())),         $elem = $(this);      $elem.addclass('post-' + i);      // make sure it's not photo     if( ! $elem.hasclass('photo')) {          // if it's chosen wide, previous row doesn't have wide @         // position , it's in position 3 add .wide , update vars         if(addwide && prevrowwide != && != 3) {              $elem.addclass('wide');              // stores position of previous rows wide don't clashes             prevrowwide = i;             i++;         }         else if (i == prevrowwide) {              // if we've got round same row number , it's not             // been set above can rid of it's done it's job ,             // don't want affecting next row             prevrowwide = 0;         }     } });