Isotope - trying to sort items by original order

问题

I'm a newbie to posting on stackoverflow, and also using Codepen; so please go gentle with me!

After finding the wonderful Masonry by David DeSandro, I then found the amazing Isotope. I've been trying to accomplish what (I believe) should be the very simple task of maintaining the original order of items. After tearing my hair out for days (and also trying Vit ‘tasuki’ Brunner's Masonry Ordered) -I've obviously got something wrong with my syntax and would appreciate any help, please.

Basically, I have a number of pages, each containing a (different) number of 'boxes'. Each box will have the same width, but varying height. The boxes need to be in their original order and also retain that order when the window is resized.

EXAMPLE CODEPEN: Isotope - trying to sort items by original order

The boxes will NOT be numbered - they are only numbered in my Pen for illustration.

HTML:

<div id="container">

    <div class="prod one"><h1>One</h1></div>
    <div class="prod two"><h1>Two</h1></div>
    <div class="prod three"><h1>Three</h1></div>    
    <div class="prod four"><h1>Four</h1></div>
    <div class="prod five"><h1>Five</h1></div>  
    <div class="prod six"><h1>Six</h1></div>
    <div class="prod seven"><h1>Seven</h1></div>    
    <div class="prod eight"><h1>Eight</h1></div>    
    <div class="prod nine"><h1>Nine</h1></div>
    <div class="prod ten"><h1>Ten</h1></div>
    <div class="prod eleven"><h1>Eleven</h1></div>
    <div class="prod twelve"><h1>Twelve</h1></div>
    <div class="prod thirteen"><h1>Thirteen</h1></div>
    <div class="prod fourteen"><h1>Fourteen</h1></div>
    <div class="prod fifteen"><h1>Fifteen</h1></div>
    <div class="prod sixteen"><h1>Sixteen</h1></div>
    <div class="prod seventeen"><h1>Seventeen</h1></div>        

</div>  <!-- /end container -->

CSS (my apologies here - despite numerous attempts, my post won't seem to allow me to put this in as code - although it validates - please see my CodePen example.

JS:

var $container = $('#container');
    // init
    $container.isotope({
    // options
    itemSelector: '.prod',
    layoutMode: 'masonry'
    });

The JS below 'works', but makes the boxes all the same size and distanced from each other:

        $('.prod').isotope({
    getSortData: {
    sortBy: 'original-order'
    }
    });

I've also tried using Masonry Ordered, but get the same results. I've tried to replicate the code from Vit 'tasuki' Brunner's Photo gallery demo and have tried to do a Pen for this, too, but can't seem to get it to work.

I've also tried inialising Isotope in HTML, and think my syntax is OK, using valid JSON - but again, no success:

<div id="container" class="js-isotope" data-isotope-options='{ "itemSelector": ".prod", "layoutMode": "masonry", "sortBy": "original-order" }'>

Anyhoo, I've waffled on for far too long already. I'd be really obliged if someone could point out the obvious to me!

Thanks Webbo

回答1:

Unfortunately this is a common misconception, when using Isotope. The ordering setting just specifies in which order your elements are inserted. Original order means that element 1 is put first in the DOM, element 2 second and so on. After each insertion the algorithm tries to find the best fitting place.

Isotope uses a greedy first fit algorithm, which puts the elements from left to right, from top to bottom. What happens is that after the first row of elements (algorithm reached the end of the right side), it checks if there is free space in the next line. Once it finds a line with free space it puts the next (specified by original order) element there.

This results in your perceived wrong order, which is just correct in the sense of Isotope.

Example:

a  +---+  +---+  +---+
b  | 1 |  | 2 |  | 3 |
c  |   |  |   |  |   |
d  |   |  +---+  |   |
e  |   |  +---+  +---+
f  +---+  | 4 |  +---+
g  +---+  |   |  | 5 |
h  | 6 |  +---+  |   |
   |   |         |   |
   +---+         +---+

The first three elements are straight forward and line a is exhausted.
Element 4 is inserted into the DOM and Isotope searches for a place to fit it in. Lines b, c and d have no space left.
Algorithm checks line e, finds free space and puts element 4 there.
Line e is exhausted, so element 5 is put on the next line.
Finally element 6 is placed into the first line (g) that has a free space. This place is left to element 4 and 5, which may look like the ordering is shuffled.

The exactly same can be perceived with all algorithms that fill the space as best as possible. The reason for this is, that bin packing (the problem of minimizing space) and orderings are totally orthogonal things in their nature.

If you want both, you have to make a compromise. Luckily Isotope implements such compromises. For example layouting mode fitRows keeps the ordering, while still minimizing the horizontal space.

来源：https://stackoverflow.com/questions/29052151/isotope-trying-to-sort-items-by-original-order

标签

sorting

jquery-isotope

masonry