1

石積みの列の下部にある各アイテムに、CSS を使用したターゲティングを許可するクラスを与える方法はありますか?

列の数はページ幅によって変化するため、列の下部にある項目が変化し、ページのサイズが増減します。

問題を説明するために、下の2つの画像の列の下部にある各アイテムから境界線の下部を削除したいと思います:

ここに画像の説明を入力

ここに画像の説明を入力

4

2 に答える 2

3

コールバックを使用layoutCompleteしてオブジェクトをループし、一番下の各アイテムに、それらの top プロパティの値を調べることで 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');
        });
    }

});
于 2014-09-01T03:59:56.227 に答える
-1

アイテムの css を見つけて更新する必要があります。あなたのアイテムが<div class="item"> .....</div>あなたのアイテムクラスにcssに入っている場合は、bottom-bottom部分を置き換える必要があります。

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

これはあなたに役立つかもしれません。

于 2014-08-27T05:09:25.113 に答える