javascript - 砌体目标每列中的最后一项

Question

有没有办法给位于砌体柱底部的每个项目一个类以允许使用 CSS 定位？

列数随页面宽度而变化，因此列底部的项目将发生变化，并且页面大小会增加或减小。

为了说明问题，我想从下面 2 个图像中位于列底部的每个项目中删除边框底部：

Answer 1

您可以使用layoutComplete回调来循环对象，并通过检查它们的顶部属性的值来为底部的每个项目提供一个 last 类：

$(document).ready(function(){

    var $container = $('.masonry');

    $container
        .masonry({
          itemSelector: 'article'
        })
        .masonry( 'on', 'layoutComplete', function( msnryInstance, laidOutItems ) {
            styleMasonry();
        });

    styleMasonry(); 

    function styleMasonry() {
        var cols = {};
        var top, left;
        $('.masonry > *').each(function(){
            $(this).removeClass('last');
            top = parseInt($(this).css('top').replace('px', ''));
            left = $(this).css('left');
            if(typeof cols[left] == 'undefined') {
                cols[left] = {top: top, object: $(this)};
            } else if(top > cols[left].top) {
                cols[left] = {top: top, object: $(this)};
            }
        });
        $.each(cols, function( index, item ) {
            item.object.addClass('last');
        });
    }

});

Answer 2

您必须找出您的项目的 css 并需要更新它。如果您的项目<div class="item"> .....</div>然后进入您的项目类到 css 中，您必须替换底部底部部分。

.item{
border-bottom:none;  // or border-bottom: 0px;
}

可能这对你有帮助。