随机可变网格

Question

我在做一个需要一个可变网格的网站。它基于Tumblr，因此不幸的是我们不能使用任何PHP来解决我们的问题。我们想让一些帖子比其他的更宽，但是这应该是随机的，照片帖子应该被排除在其中。

每个文本块的当前标记是：

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

在这个网格中，我最好的方法是使用下面的代码，但是我无法检查上一行的宽帖是否在相同的级别上，因为这看起来很奇怪，但我确实想这样做。

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

期望效果： http://c.davey.im/Uzq9

电流效应 http://c.davey.im/Uzsv

提前谢谢！

Answer 1

我想我会有一出戏，想出了这样的点子：http://jsfiddle.net/andyface/7KCGJ/

你认为它能完成你想要的工作。

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