Randomised variable grid

Question

I'm working on a website that needs to have a variable grid. It's based on Tumblr so unfortunately we can't use any PHP to solve our problem. We want to make some posts wider than other, but this should be done randomly and photo posts should be excluded from this.

The current markup for each of the 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 is the post's content</p>
    </div>
  </a>
</article>

My best shot at this grid is the following code but I wasn't able to check whether the wide post on the previous row is on the same level because that looks odd but I do want to do that.

var i = 0;
$('.post').each(function() {
// determine whether the count has to be reseted or not
  if(i === 3){
    i = 1;
  }else{
    i++;
  }
  $(this).addClass('post-' + i); // add one so the each post is properly named for this grid to work
  if($(this).is(':first-of-type') || $(this).hasClass('text')){
    $(this).not('.post-3').addClass('wide');
  }
  // in case the first of 2 posts is a wide one
  if($(this).is('.wide.post-1')){
    i = 2;
  }
});

Desired effect: http://c.davey.im/Uzq9

Current effect http://c.davey.im/Uzsv

thanks in advance!

Answer 1

Thought I'd have a play and have come up with this: http://jsfiddle.net/andyface/7KCGJ/

Think it does the job you're after.

var i = 0,
    prevRowWide = 0;

$('.post').each(function () {

    //GENERATE POST POSITIONING INDEX
    i === 3 ? i = 1 : i++;

    // RANDOMLY GENERATE VALUE TO SAY IF POST SHOULD BE 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 A PHOTO
    if( ! $elem.hasClass('photo')) {

        // IF IT'S CHOSEN TO BE WIDE, THE PREVIOUS ROW DOESN'T HAVE A WIDE AT
        // THAT POSITION AND IT'S IN POSITION 3 THEN ADD .wide AND UPDATE VARS
        if(addWide && prevRowWide != i && i != 3) {

            $elem.addClass('wide');

            // STORES THE POSITION OF THE PREVIOUS ROWS WIDE SO YOU DON'T GET CLASHES
            prevRowWide = i;
            i++;
        }
        else if (i == prevRowWide) {

            // IF WE'VE GOT BACK ROUND TO THE SAME ROW NUMBER AND IT'S NOT JUST
            // BEEN SET ABOVE THEN WE CAN GET RID OF IT AS IT'S DONE IT'S JOB AND
            // WE DON'T WANT IT AFFECTING THE NEXT ROW AS WELL
            prevRowWide = 0;
        }
    }
});