Question

我使用jQuery Masonry来帮助处理列表。它的工作原理但问题是我的任务是按照特定的顺序保存列表。在页面上总是有两个相关的块 - 我在这里用颜色标记它们以便可视化：

enter image description here

这适用于允许偶数个块组合在一起的分辨率。问题是当页面上有奇数个块时的分辨率 - 这些块必须保持彼此靠近并且我被要求制作一个“蜿蜒曲折”的块。奇数行上的模式如此：

enter image description here

正如您所看到的，列表顺序基本上反向替换行。

代码如下所示：

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

正如您所看到的，没有任何内容可以将这些块固定在一起。我可以使用有序列表或无序列表，但我仍然不知道如何让列表反转＆＃39;在某些屏幕尺寸。我想这是关于砌体的事情，我必须编辑，但我不知道从哪里开始。有没有人曾经不得不先订购这样的清单，或者有任何关于如何实现这个目标的指示？

Answer 1

对此组织并非百分之百满意，但它实现了目标：

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个块将对齐到左边而不是它对应的＃1块。

更改备用行上列表的方向

1 个答案: