javascript - 随机变量网格

Question

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

每个文本 block 的当前标记是:

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