确定包含项目的对齐顺序

Question

这是我的代码：http://codepen.io/helloworld/pen/JoKmQr

让我们假设我从服务器获取了一组数据。数据有标题和订单号。

我有5个数组项，orderNumber从1到5。

现在我想布局5个div，其中每个div位于包装布局系统中的某个位置。

看到这张图片：

颜色并不重要。重要的是div的顺序根据他们的订单号。

orderNumber的流程从顶部变为向下，从左侧变为向右。

问题：

如何确定布局系统中div的顺序？他们自动布局到我想要的流程？或者手动订购的提示也没关系： - ）

HTML

<h1>Packery demo - Draggabilly</h1>
<div class="packery js-packery" data-packery-options='{ "isHorizontal": true }'>
  <div class="item w1"></div>
  <div class="item h4"></div>
  <div class="item w2"></div>
  <div class="item w3"></div>
  <div class="item h2"></div>
</div>

CSS

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body { font-family: sans-serif; }

.packery {
  background: #FDD;
  background: hsla(45, 100%, 40%, 0.2);
  counter-reset: item;
  height: 400px;
}

/* clearfix */
.packery:after {
  content: ' ';
  display: block;
  clear: both;
}

.item {
  width: 80px;
  height: 80px;
  float: left;
  border: 4px solid #333;
  border-color: hsla(0, 0%, 0%, 0.3);
}

.item:hover {
  border-color: white;
  cursor: move;
}

.item.w1 { width:   80px; background:green; }
.item.w2 { width:   80px; background:blue; }
.item.w3 { width:   80px; background:yellow; }
.item.h2 { height:  80px; background:red; }
.item.h4 { height: 160px; width:80px; background:orange;}

.item:before {
  counter-increment: item;
  content: counter(item);
  display: block;
  color: white;
  padding-top: 0.2em;
  text-align: center;
  font-size: 18px;
}

.item.is-dragging,
.item.is-positioning-post-drag {
  border-color: white;
  background: #09F;
  z-index: 2;
}

JS

// external js
// http://packery.metafizzy.co/packery.pkgd.js
// http://draggabilly.desandro.com/draggabilly.pkgd.js

$( function() {

  var $container = $('.packery').packery({
    columnWidth: 80,
    rowHeight: 80
  });

  $container.find('.item').each( function( i, itemElem ) {
    // make element draggable with Draggabilly
    var draggie = new Draggabilly( itemElem );
    // bind Draggabilly events to Packery
    $container.packery( 'bindDraggabillyEvents', draggie );
  });

});

Answer 1

为了获得packery提供元素的索引，必须调用＆＃39; getItemElements＆＃39;获得每个元素的准确索引。原因是包装实际上没有对DOM上的项目进行重新排序，它保留了自己的索引。

这是解决这个问题的方法：

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

orderItems = function() {
var itemElems = $($container.packery('getItemElements'));
$(itemElems).each(function(i, itemElem) {
$(itemElem).attr('data-module-index', i); 
// adds a data attribute called data-module-index to the element and makes the value its actual index.
                });
            };
orderItems();

因此，当您重新布置项目时，请务必保存/使用与打包为您提供上述功能的元素相同的索引顺序