javascript - 复杂的砌体布局似乎不可能用同位素

Question

我有这个漂亮的设计，我想编写代码。但我在内容部分的砌体布局上苦苦挣扎。

有 500*500px、250*500、250*250 块。

我尝试使用同位素并测试不同的布局模式，但似乎没有一个适合设计。http://isotope.metafizzy.co/例子虽然看起来好多了。哦，我的测试站点在这里：http ://mac.idev.ge:800/test/

我能做些什么？我应该推出自己的算法，还是有一个简单的解决方案？:) 也许我以错误的方式使用同位素？

Answer 1

Isotope 的问题在于它试图按照提供的顺序排列项目（它允许排序，因此假设顺序至少有点重要）。

您可以通过几种方式更改布局。

• 更改项目的顺序（基于布局宽度），
• 为同位素使用自定义布局（至少有一个bin-packing基于的布局），
• 为同位素编写自己的自定义布局（我可以保证这非常困难），
• 或改用Packery之类的东西。

Packery 没有与 Isotope 相同的功能集（没有排序或过滤），但可能是您界面的更好选择。