确定包装件的对齐顺序。

Question

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

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

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

现在，我想布局5 div，其中每个div是定位在一个特定的地方包装布局系统。

请看这张图片：

​

​

颜色不重要。重要的是div的顺序，根据它们的序号。

orderNumber的流程从top到down，从left到right。

问题

如何确定布局系统中div的顺序？他们会自动布局到我想要的流量上？或者暗示手动订购也可以:-)

<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

为了获得包给元素的索引，必须调用“getItemElements”才能得到每个元素的准确索引。原因是packery实际上并没有重新排序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();

因此，当您中继这些项目时，请确保保存/使用相同的索引顺序，用于packery为您提供的具有上述功能的元素。