I have a website that is using jquery's isotope wrapper with html code like this:

<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>

The template I am using is using this javascript code to initialize the isotope-stuff:

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

This leads to a "masonary" kind of arrangement where the rows have different position absolute top-positions. However, this is unwanted and the content elements have an unknown height (depending on user input).

I am not really familiar with this isotope/masonary type of content and got the following question: how can I give all article.isotopeItem elements the same height (or atleast make each row have an upper solid line ? There is no dynamic adding/deleting of elements in my case, as this is all done on server-side with plete page reloads.

I have a website that is using jquery's isotope wrapper with html code like this:

<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>

The template I am using is using this javascript code to initialize the isotope-stuff:

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

This leads to a "masonary" kind of arrangement where the rows have different position absolute top-positions. However, this is unwanted and the content elements have an unknown height (depending on user input).

I am not really familiar with this isotope/masonary type of content and got the following question: how can I give all article.isotopeItem elements the same height (or atleast make each row have an upper solid line ? There is no dynamic adding/deleting of elements in my case, as this is all done on server-side with plete page reloads.

• javascript
• jquery
• jquery-isotope
• jquery-masonry
• masonry

• do you not need to just use the fitRows layout? isotope.metafizzy.co/layout-modes/fitrows.html – RemarkLima Commented Jun 28, 2014 at 18:28
• It ain't resizing the height's of the items but it does what I was looking for. Thank you. – Manuel Arwed Schmidt Commented Jun 28, 2014 at 18:44

1 Answer 1

I assume this is the plugin: http://isotope.metafizzy.co

So just use fitRows and the tops of each row will line up - http://isotope.metafizzy.co/layout-modes/fitrows.html

So:

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

});