标签：jquery javascript jquery-masonry jquery-isotope masonry

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。