jquery - 需要一个砖石插件来复制这个网格或只是 CSS？

Question

试图弄清楚这个网格布局是如何工作的:http://www.stories.com/

看看当浏览器缩小第三列中的大图时如何切换到小图？这是用砌体插件完成的吗？还是仅使用 CSS 通过更改媒体查询中 li 元素的位置？

Answer 1

如前所述，由于您没有提供任何代码示例，这可能对其他人没有帮助。无论如何，回答你的问题:

他们同时使用 JavaScript 和 CSS，但他们不会改变样式表的位置。图像大小不会改变，而是会重新分配。他们有自定义方法(如 MasonryFiller 和 calculateLandscapeGrid)来计算行和列以及元素的定位。他们使用媒体查询来更改标准网格类(如 .s-1x2)的宽度和高度。

无论如何，我们有很多原生工具，比如 columns或 flexbox自己 build 。此外，计算子元素的绝对位置也不是什么魔法。如果您仍然喜欢它，可以查看经过现场测试的解决方案，例如 Masonry或 Isotope等等。