随机变量网格答案

【问题标题】：Randomised variable grid随机变量网格
【发布时间】：2014-04-14 14:41:15
【问题描述】：

我正在开发一个需要可变网格的网站。它基于 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

提前致谢！

【问题讨论】：

两个链接都一样...
@scott 已修复，谢谢！
我将尝试提出一个更通用的函数来满足您的需求，因为在 StackOverflow 上查找过于具体的答案是我的一个小烦恼。
试试这个？： $('.post').each(function(i, v) { if ($(this).not('.photo') && (( i = 0) || ( i = 1 && $(this).prev().not('.wide')) || (i > 1 && $(this).prev().not('.wide') && $( this).prev().prev().not('.wide')) )) { $(this).addClass('wide'); }});`
如果您通过jsbin.com 分享演示，您将获得更多帮助。

标签： javascript jquery variables grid tumblr

【解决方案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;
        }
    }
});

【讨论】：