StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Basically the reason it is behaving the way that it is, is that is what the <code>fitColumns</code> option does; the items are arranged in vertical columns one above the other regardless of the size of the items being arranged. </p> <p>To get a better view of the available layout options and how they look with items of different sizes check out this <strong><a href="http://jsfiddle.net/apaul34208/Y4mUN/22/" rel="nofollow">Working Example</a></strong>.</p> <p>It sounds like you may want to try <code>layoutMode: 'masonryHorizontal'</code>.</p> <p><strong><a href="http://jsfiddle.net/apaul34208/S5vAG/1429/" rel="nofollow">Working Example using <code>masonryHorizontal</code></a></strong></p> <pre><code>$(function(){ var $container = $('#container'), $items = $('.item'); $container.isotope({ itemSelector: '.item', layoutMode : 'masonryHorizontal', // Important Bit resizesContainer : true, getSortData : { fitOrder : function( $item ) { var order, index = $item.index(); if ( $item.hasClass('large') && index % 2 ) { order = index + 1.5; } else { order = index; } return order; } }, sortBy : 'fitOrder' }); $items.click(function(){ var $this = $(this); // nothing to change if this already has large class if ( $this.hasClass('large') ) { return; } var $previousLargeItem = $items.filter('.large'); $previousLargeItem.removeClass('large'); $this.addClass('large'); $container // update sort data on changed items .isotope('updateSortData', $this ) .isotope('updateSortData', $previousLargeItem ) // trigger layout and sort .isotope(); }); }); </code></pre> <p>Note in the example I changed the width of <code>.items.large</code> so that it would look even.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload