复杂的砖石布局似乎不可能用同位素

Question

我有这个美丽的设计，我想编码。但我正在努力与内容部分的砌体布局。

有500 * 500px，250 * 500,250 * 250块。

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

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

Answer 1

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

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

• 更改商品的顺序（基于布局宽度），
• 为Isotope使用自定义布局（其中至少有一个基于bin-packing），
• 为同位素编写自己的自定义布局（我可以保证这很难），
• 或切换到使用像Packery这样的东西。

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