使用 Masonry + LessCSS 正确加载页面答案

【问题标题】：Loading a page correctly with Masonry + LessCSS使用 Masonry + LessCSS 正确加载页面
【发布时间】：2017-08-20 16:16:01
【问题描述】：

我遇到了 Masonry 插件的问题，导致仅在更改视口时才起作用，这意味着在您调整浏览器窗口大小之前，砌体框是不可见的。之后，这些盒子不再可见，但 Masonry 也可以按预期工作。

我通过再次使用常规 CSS 来设置样式解决了这个问题，而不是像我原本打算的那样使用 LESS CSS。

但是我能做些什么来同时使用这两者呢？（这似乎不是一个简单的“重新排序脚本的加载方式”之类的事情）

有趣的是，当我使用 jsFiddle 并在那里实现 LESS CSS 时，没有问题。也许有人可以告诉我 jsFiddle 是如何解决这个问题的？

 code

【问题讨论】：

jsfiddle 不工作。请添加使用的库（使用正确的版本）。
工作小提琴：jsfiddle.net/zo3ap6p5。 columnWidth 选项以及第 3 方库的排序错误。
如果它在 jsfiddle 上运行但不在您的网站上运行，我会说您的代码是问题所在；）为了更深入，我们需要查看您的代码。
这是一个时间问题。在将样式添加到所有元素之前调用 Masonry。
jsfiddle 不使用 less.js。您可以尝试使用 load 事件 (api.jquery.com/load-event) 而不是 domready 与 less.js 无关。如果这不起作用，您将需要收听 less.js pageLoadFinished 事件。

【解决方案1】：

“解决方案”：由于解决方案会很麻烦，而且每次加载时编译 CSS 都非常繁重，尤其是客户端，最好的解决方案是将 LESS 完全排除在最终结果之外，只使用它用于开发，但用于实际使用的 LESS-to-CSS-rendered 文件。使用 CSS，砌体时间问题消失了。

【讨论】：