如果有答案,我深表歉意,如果有,请指出正确的副本。
- 同位素:https ://isotope.metafizzy.co
- 图片加载: https ://imagesloaded.desandro.com/
- 懒惰尺寸:https ://github.com/aFarkas/lazysizes
我正在尝试构建一个迷你画廊,它使用lazysizes 进行延迟加载,使用isotope 进行排序,并在加载延迟图像时使用imagesLoaded 重新排列布局。
出于某种原因,我的 imagesLoaded 函数不会更新同位素,但如果我记录事件然后手动运行iso.layout()
它会重排布局。有什么想法吗?
import lazySizes from 'lazysizes';
const Isotope = window.Isotope = require("isotope-layout/dist/isotope.pkgd.js");
const imagesLoaded = window.imagesLoaded = require("imagesloaded/imagesloaded.pkgd.js");
//.....
document.querySelectorAll(".content-gallery .medias").forEach(element => {
const elem = element;
const iso = new Isotope(elem, {
itemSelector: ".media",
layoutMode: "fitRows",
percentPosition: true,
});
function reflow(){
iso.layout();
}
imagesLoaded(elem)
.on("progress", reflow)
.on("always", reflow)
.on("done", reflow)
.on("fail", reflow)
.on("lazyloaded", reflow)
.on("load", reflow);
});
如果我做了一件讨厌setInterval()
的事,那么同位素也会重新流动,所以 ImagesLoaded 似乎有问题。