从左到右的水平布局排序

Question

我将Metafizzy's packery与draggabilly一起使用。

ordering codepen显示left-to-right排序，但horizontal layouts不显示：

使用水平布局，默认为top-to-bottom：

问题：两年前，他说left-to-right订购是不可能的，但从那以后没有看到任何文件。我真的需要left-to-right排序horizontal布局。我怎么能做到这一点？

var $grid = $('.grid').packery({
    isInitLayout: false,
    horizontal: true,
    originLeft: true,
    gutter: 10,
});

...

function orderItems() {
    var itemElems = $grid.packery('getItemElements');
    $( itemElems ).each( function( i, itemElem ) {
        $( itemElem ).text( i + 1 );
    });
}

$grid.on( 'layoutComplete', orderItems );
$grid.on( 'dragItemPositioned', orderItems );

Answer 1

似乎packery提供从左到右的排序。

所以我按元素位置排序：

var itemElems = $grid.packery('getItemElements');

let sorted = $(itemElems).sort((a, b) => {
                let $a = $(a);
                let $b = $(b);
                let aTop = $a.position().top;
                let aLeft = $a.position().left;
                let bTop = $b.position().top;
                let bLeft = $b.position().left;
                return parseFloat(aTop) - parseFloat(bTop) || parseFloat(aLeft) - parseFloat(bLeft);
            });