javascript – jQuery Isotopewrapper：可以将所有isotopeItems调整到相同的高度(每行)吗？

我有一个网站使用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
            }
        });
    });
}  

这导致“主动”类型的布置,其中行具有不同的位置绝对顶部位置.但是,这是不需要的,内容元素的高度未知(取决于用户输入).

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

解决方法:

我假设这是插件：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,javascript,jquery-masonry,jquery-isotope,masonry
来源： https://codeday.me/bug/20190717/1490798.html