砌体定位每列中的最后一项

Question

有没有办法让位于砌块列底部的每个项目成为允许使用CSS定位的类？

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

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

Answer 1

您可以使用layoutComplete回调循环遍历对象，并通过检查其顶级属性的值为底部的每个项目提供最后一个类：

$(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;
}

可能对您有所帮助。