Create isotope container without white space

Question

I am using the isotope plugin. I am trying to package images in a div. I am having the issues wear the items are not packaging properly and there are large white spaces

There are three size images I am using

large - 500px
medium - 250 px
small - 150px

I am using the following code to initialize

$(window).load(function(){
     var $container = $('#item-container');

     $container.isotope({
          layoutMode: 'masonry',
          itemSelector: '.iso-container'
     });
});

I know masonry used the first item to determine coulmn width, but no matter if I use the large item first, or the small item. Neither seems to packge together nicely.

Here is the output when I use the smallest image first. The border of the container is in red

enter image description here

I am not sure why the first two items are right next to each other, but then there is a gap between the second and third item (Location Promo (md) 1, Blog Promo (lg) 1)

Here is the result if I put the largest item first enter image description here

The second image makes more sense to me. Since the large item determines column length, there are only two coulmns for the container. I am not sure why the third item (Video promo (sm1)) isnt next to the second item (Location Promo (md) 1).

Whoops can't see the name on top two items in second picture. i think you are still able to tell what I am discribing.

EDIT: I stumbled across the perfect masonry plugin, I am trying to implement it but I get the error

Cannot read property 'layout' of undefined on this line

this.options.perfectMasonry.layout

EDIT2 I got it working, but it doesnt look any better

new code

$container.isotope({
    layoutMode: 'perfectMasonry',
    perfectMasonry: {
        layout: 'vertical'
    },
    itemSelector: '.iso-container'

});

EDIT 3

Getting closer.

new code

$container.isotope({
     layoutMode: 'perfectMasonry',
     perfectMasonry: {
        layout: 'vertical',
        columnWidth: 20,
        rowHeight: 20
     },
     itemSelector: '.iso-container'
});

new image enter image description here

score 1 · Accepted Answer · answered Aug 01 '13 at 16:23

The key to using isotope is choosing the correct columnWidth.

Here is my updated call

$container.isotope({
     layoutMode: 'perfectMasonry',
     perfectMasonry: {
        layout: 'vertical',
        columnWidth: 25
     },

     itemSelector: '.iso-container'
});

The way you arrive at this number is by choosing the smallest common multiple where the objects do not overlap.

In my case this was 25. I tried both 5, and 10 but this didnt allow enough space. If I chose 50 then there was white space in between objects.

There is a jagged edge at the bottom of the container, but both left and right and there are no 'holes' in the middle of container.

Also you may need to try different orders of the items in your container.

Placing the items as: Large, Small, Small, Medium may leave white spaces, but doing the order Small, Large, Small, Medium may package nicely together.

Create isotope container without white space

1 Answers1