1

完全な 3 列にまたがるいくつかの行を持つ 3 列のグリッド レイアウトがあります。そして、imagesLoadedプラグインも使用して画像をロードしています。ただし、同位体はすべてを 1 列に押し込み、ソースを確認すると、各項目が 0px のままであることが示されます。

以下は私のHTML、CSS、JSのスニペットです。問題の手がかりはありますか?

HTML:

<div id="feature-work" class="clearfix">
                        <figure class="websites wide-feature"><a href="#">
                            <img src="http://html5doctor.com/wp-content/uploads/2010/03/macaque.jpg" alt="Monkey!" >
                            <figcaption>1. Macaque</figcaption>
                        </a></figure>

                        <figure class="websites tall-feature"><a href="#">
                            <img src="http://html5doctor.com/wp-content/uploads/2010/03/kookaburra.jpg" alt="Monkey!" >
                            <figcaption>2. Kookaburra</figcaption>
                        </a></figure>



CSS:

    #feature-work {
        margin:0 auto;
        width:960px;
    }

    #feature-work figure {

        position:relative;
        float:left;
        overflow:hidden;
        margin:10px;
        padding:0;
        width:298px;
        height:298px;
        border:1px solid #ccc;
    }

    #feature-work figure img {
        float:left;
        width:100%;
        height:218px;
        overflow:hidden;
    }

JS

$container = $('#feature-work');    

    $container.imagesLoaded( function(){


            $container.isotope({
                itemSelector : 'figure',
                layoutMode: 'masonry'

            });

});
4

1 に答える 1

1

一部の人には明らかかもしれませんが、最初のアイテムが「デフォルト」サイズよりも大きい場合、同位体の計算が混乱するため、明示的にlayoutModeとcolumnWidthを設定する必要があります。そして次の「落とし穴」は、columnWidth が要素 outerWidth を使用しているように見えることです。つまり、margin が含まれています。

$container = $('#feature-work'); $container.imagesLoaded( function(){

    $container.isotope({
        itemSelector : 'figure',
        layoutMode:'masonry',
        masonry:{
            columnWidth: 320
        }       
    });

});

于 2013-02-13T11:37:18.647 に答える