3

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

<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
            }
        });
    });
}

这导致行具有不同位置的“砌体”排列position absolute top。但是，这是不需要的，并且内容元素的高度未知（取决于用户输入）。

我不太熟悉这种同位素/砌体类型的内容，并得到以下问题：我怎样才能给所有article.isotopeItem元素相同的高度（或者至少让每一行都有一条上实线？没有动态添加/删除元素我的情况，因为这一切都是在服务器端完成的，并重新加载了完整的页面。

4

1 回答 1

12

我假设这是插件：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' 

});
于 2014-06-28T18:35:52.360 回答