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 即包括边距！

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

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

});

于 2013-02-13T11:37:18.647 回答