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

随机变量网格

1 个答案: