jquery - 在交替行上更改列表的方向

Question

我正在使用 jQuery Masonry帮助处理响应式地列出列表。它有效，但问题是我的任务是按照非常特定的顺序保存列表。在页面上总是有两个相关的 block - 我在这里用颜色标记它们以便可视化:

这适用于允许偶数 block 在一起的分辨率。问题是当页面上有奇数个 block 时的解决方案 - 这些 block 必须彼此靠近，我被要求在奇数行上制作一个“蛇形”图案，所以它看起来像这样:

如您所见，列表顺序实际上是倒退的。

代码如下所示:

<div id="block_holder">

        <a class="square_block" href="#">
            <div class="content_block client_block">
                <font color="red">1</font>
            </div>
        </a>
        <a class="square_block" href="#">
            <div class="content_block client_block">
                <font color="red">2</font>
            </div>
        </a>
        <a class="square_block" href="#">
            <div class="content_block client_block">
                <font color="blue">1</font>
            </div>
        </a>
         <a class="square_block" href="#">
            <div class="content_block client_block">
                <font color="blue">2</font>
            </div>
        </a>
</div>

<script>
$(document).ready(function() {
            $('#block_holder').masonry({
                columnWidth: 238,
                gutter: 25,
                itemSelector: '.square_block'
        });
});
</script>

如您所见，并没有什么内在地将 block 链接在一起。我可能会使用有序列表或无序列表，但我仍然不知道如何让列表在某些屏幕尺寸下“反转”。我想这是我必须编辑的关于 Masonry 的内容，但我什至不知道从哪里开始。有没有人以前必须订购这样的 list ，或者对我如何实现这一点有任何指示？

Answer 1

对这个组织不是 100% 满意，但它实现了目标:

http://jsfiddle.net/SF8W6/2/

您可能最感兴趣的部分:

function reorderItems(){
    var $items = $holder.find(options.itemSelector);
    $items.each(function(i,item){
        var remain = i%6;
        if(remain==2){
            $tempWrap = $('<div class="tempWrap"></div>');
            $(item).after($tempWrap);
        }

        if(remain > 2){
            $(item).detach().prependTo($tempWrap);
        }
    });

    $(".tempWrap").each(function(){
        $(this).find(options.itemSelector).first().unwrap();
    }).remove();

    triggerReset = true;
}

不知道是否有明显更好的方法来使用 jQuery 重新排序一系列元素，但我基本上在每第 3 个元素之后将一个临时包装 div $tempWrap 添加到 dom 中，并且以相反的顺序用接下来的 3 个元素填充它(注意 .prependTo() 的使用)，然后我用 摆脱 $tempWrap 容器.unwrap().

注意!

只有当您有多个 .square_block 项是 3 的倍数时(在您的情况下，是 6 的倍数)，这才会起作用>，因为一切都是“1-2”对)。如果您只有 2 对(例如)，则第 4 个 block 将向左对齐，而不是在其对应的 #1 block 下方对齐。