Question

我有一个网站使用jquery的同位素包装器，其代码如下：

<div class="isotopeWrapper clearfix isotope">
  <article class="col-sm-4 isotopeItem isotope-item">
    <!-- item1 --->
  </article>

  <article class="col-sm-4 isotopeItem isotope-item">
    <!-- item2 --->
  </article>

  <!-- ... unknown amount of items with unknown height -->
</div>

我正在使用的模板使用此javascript代码初始化同位素 -

if($('.isotopeWrapper').length){

    var $container = $('.isotopeWrapper');
    var $resize = $('.isotopeWrapper').attr('id');

    // initialize isotope
    $container.isotope({
        itemSelector: '.isotopeItem',
        resizable: false, // disable normal resizing
        masonry: {
            columnWidth: $container.width() / $resize
        }



    });
    var rightHeight = $('#works').height();
    $('#filter a').click(function(){


        $('#works').height(rightHeight);
        $('#filter a').removeClass('current');


        $(this).addClass('current');
        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector,
            animationOptions: {
                duration: 1000,
                easing: 'easeOutQuart',
                queue: false
            }
        });
        return false;
    });


    $(window).smartresize(function(){
        $container.isotope({
            // update columnWidth to a percentage of container width
            masonry: {
                columnWidth: $container.width() / $resize
            }
        });
    });
}

这导致了一个＆＃34; masonary＆＃34;行有不同position absolute top - 位置的排列方式。但是，这是不需要的，内容元素的高度未知（取决于用户输入）。

我对这种同位素/ masonary类型的内容并不十分熟悉并得到以下问题：如何给所有article.isotopeItem个元素赋予相同的高度（或者至少使每一行都有一个上面的实线？在我的情况下没有动态添加/删除元素，因为这都是在服务器端完成的，并且完成了页面重新加载。

Answer 1

我认为这是插件：http://isotope.metafizzy.co

所以只需使用fitRows，每行的顶部就会排成一行 - http://isotope.metafizzy.co/layout-modes/fitrows.html

所以：

// initialize isotope
$container.isotope({
    itemSelector: '.isotopeItem',
    resizable: false, // disable normal resizing
    layoutMode: 'fitRows' 

});

jQuery Isotope Wrapper：可以将所有同位素项目调整到相同的高度（每行）吗？

1 个答案: