使用可調整大小和可排序元素的flexbox進行砌體式布局的選項有哪些

Question

在我的有角度的應用程序中，我使用ui-sortable對<ul>進行排序。

元素本身是可調整大小的。

這類似於我的設置：

我希望“ 4”和“ 5”使用它們上方的空格：

這是一個小提琴 。 請注意，這是一個過於簡化的示例，並且元素實際上是由用戶調整大小並可以排序的。

像石工之類的庫不會這樣做，因為它們使用絕對定位的元素，這將使ui可排序的工作方式失效，調整大小也不會推動該元素的工作。

那么我該如何實現呢？

• 我是否正確理解僅使用CSS的解決方案是不可能的？ 該flexbox將獲得最高元素的高度，並將該高度放入“行”中 。
• 是否有任何不依賴於position: abolute js解決方案position: abolute或更確切地說，它仍然可以讓我排序？
• 在不刪除已經擁有的庫的情況下，我有哪些選擇？
• 我有什么選擇可以擺脫已經擁有的庫？

Answer 1

我相信我也遇到過類似的問題。 我最終選擇了http://isotope.metafizzy.co 。 然后，一旦用戶更改了框的大小（或順序），就可以在UI回調上運行方法以重新布置框： http : //isotope.metafizzy.co/methods.html#layout