sortBy original-order not sorting items

[neal5689]

I have a fluid isotope grid setup, I'm looking to keep the original order all the time, even when the browser window is resized. Thus I thought using sortBy: 'original-order', would solve this problem, but the .grid-block divs aren't keeping their original order.

Here's a jsfiddle demo to demostrate: http://jsfiddle.net/2kmGL/

and the jQuery markup as follows:

    $(document).ready(function () {
        setTimeout(function () {
            $('.grid-wrap').isotope({
                sortBy: 'original-order',
                sortAscending: true       
            });
        }, 1000);

    });

    $(function () {

        var $container = $('.grid-wrap');

        $container.imagesLoaded(function () {
            $container.isotope({
                itemSelector: '.grid-block',
                sortBy: 'original-order',
                sortAscending: true,
                animationEngine: 'best-available',
                resizable: false, // disable normal resizing
                // set columnWidth to a percentage of container width
                masonry: {
                    columnWidth: $container.width() / 4
                },

                itemPositionDataEnabled: true,
                onLayout: function (elems, instance) {
                    var items, rows, numRows, row, prev, i;

                    // gather info for each element
                    items = elems.map(function () {
                        var el = $(this),
                            pos = el.data('isotope-item-position');
                        return {
                            x: pos.x,
                            y: pos.y,
                            w: el.width(),
                            h: el.height(),
                            el: el
                        };
                    });

                    // first pass to find the first and last items of each row
                    rows = [];
                    i = {};
                    items.each(function () {
                        var y = this.y,
                            r = i[y];
                        if (!r) {
                            r = {
                                y: y,
                                first: null,
                                last: null
                            };
                            rows.push(r);
                            i[y] = r;
                        }
                        if (!r.first || this.x < r.first.x) {
                            r.first = this;
                        }
                        if (!r.last || this.x > r.last.x) {
                            r.last = this;
                        }
                    });
                    rows.sort(function (a, b) {
                        return a.y - b.y;
                    });
                    numRows = rows.length;

                    // compare items for each row against the previous row
                    for (prev = rows[0], i = 1; i < numRows; prev = row, i++) {
                        row = rows[i];
                        if (prev.first.x < row.first.x && prev.first.y + prev.first.h > row.y) {
                            row.first = prev.first;
                        }
                        if (prev.last.x + prev.last.w > row.last.x + row.last.w && prev.last.y + prev.last.h > row.y) {
                            row.last = prev.last;
                        }
                    }

                    // assign classes to first and last elements
                    elems.removeClass('first last');
                    $.each(rows, function () {
                        this.first.el.addClass('first');
                        this.last.el.addClass('last');
                    });
                }

            });

        });

        // update columnWidth on window resize
        $(window).smartresize(function () {
            if ($(window).width() > 500) {
                $('.grid-wrap').isotope({
                    masonry: {
                        columnWidth: $('.grid-wrap').width() / 4
                    }
                });
            }
            if ($(window).width() < 500) {
                $('.grid-wrap').isotope({
                    masonry: {
                        columnWidth: $('.grid-wrap').width() / 2
                    }
                });
            }
            if ($(window).width() < 400) {
                $('.grid-wrap').isotope({
                    masonry: {
                        columnWidth: $('.grid-wrap').width() / 1
                    }
                });
            }
        });

    });

Is there a reason this isn't working / can it at all be achieved?

[desandro]

The items are keeping their proper order, it's just the Masonry layout at work. Have you considered trying the fitRows layout -- which keeps items in horizontal order? Or look at masonry ordered

[neal5689]

Ah I see, that makes sense.
Yes, I considered fitRows but the divs don't have the same height.
fitColumns would be more suited but I couldn't seem to get it to work as the container doesn't have a fixed height.

Masonry ordered looks good, is that just for the masonry plugin or can it be used with isotope also?

On 21 Jul 2014, at 02:47, David DeSandro [email protected] wrote:

The items are keeping their proper order, it's just the Masonry layout at work. Have you considered trying the fitRows layout -- which keeps items in horizontal order? Or look at masonry ordered

—
Reply to this email directly or view it on GitHub.

[desandro]

Look at michieldewit/isotope-modulo-columns

[cfxd]

This "issue" with Isotope has frustrated me on several projects and it still surprises me that this functionality isn't built in. My saving grace has been modulo-columns.

[skiokko]

Hi,
I'm autohr of plugin EventOn. by one year i'm waiting correct order is fixed, but seem not fixed, and my clients are asking this.

Check this: http://postimg.org/image/vadm24jzp/

Order is not correct for nears 2--3 cells, global order stay correct but can be wrong for 1-2 cells one near the other.

How can this be fixed?

Thanks

[skiokko]

Hello, Any news?

[desandro]

There is a possible solution in a Pull Request to Masonry. See desandro/masonry#811