I am trying to make a layout mixed width/fixed height boxes to work using Packery.
While I can get Packery to work, and lays things out fine — I need to know the order as presented on screen after the layout is completed (not the order of the DOM) so that I can do some tweaks to certain blocks if it is preceded by another specific block type.
I have three 'block sizes' — 100%, 33.3333% (1/3) and 66.6667% (2/3). This means that, in some cases, if there's a narrow block (1/3) that'll fit next to smaller blocks further up, the blocks position on screen is different from the DOM (eg. up higher).
Basically I need this solution (refresh index/position of item after drag/drop) but on load: https://codepen.io/desandro/pen/mdJnF. This SO post also brings this up (slightly differently, and the solution is the same): Determine the alignment order of the items with packery
When I try to implement the code to get the elements and their position, it just spits out the DOM order, throwing things out. I can't for the life of me work out why it's not working.
Reduced test case available here: https://jsfiddle.net/4q73tbwe/1/
