Question

我有一个3列网格布局，其中几行跨越3个col。我也使用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'

            });

});

Answer 1

对某些人来说可能是显而易见的，但是如果你的第一个项目大于你的“默认”大小，它会因同位素的计算而混乱，所以你需要明确地设置layoutMode和columnWidth。而下一个“陷阱”是看起来像columnWidth使用元素outerWidth，即包括margin！

$ container = $（'＃feature-work'）; $ container.imagesLoaded（function（）{

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

}）;

为什么同位素js插件将元素推入1列？

1 个答案: