问题描述
我正在尝试使用 vuetify 和 masonry.js 构建一个照片库 我想要多个选项卡,并且选项卡内的图像采用砖石布局。 为此,我使用的是 masonry.js,而对于标签,我使用的是 vuetify。 问题是,masonry.js 只是正确布置了初始选项卡,而不是其他选项卡。 (我认为这是因为其他选项卡没有加载所以 window.onload() 不起作用) 我尝试这样做,以便当您单击每个选项卡时,会再次调用下面的 get 函数(通过为组件提供方法 handleMason() ),但它并没有像我预期的那样工作。
window.onload = () => {
const grid = document.querySelector(".grid");
const masonry = new Masonry(grid,{
itemSelector: ".grid-item",columnWidth: ".grid-sizer",fitWidth: true,});
methods: {
handleMason() {
console.log("Handled");
const grid = document.querySelector(".grid");
var masonry = new Masonry(grid,{
itemSelector: ".grid-item",});
},},
我知道调用 handleMason() 是因为 console.log 有效。但该函数的其余部分无法正确设置图像样式。 提前为这个蹩脚的问题道歉,第一次在这里提问^^
编辑
我创建了一个 repo 来说明问题:
https://github.com/Hi-Im-Jony/masonry-gallery/tree/master
该站点也是使用 netlify 部署的:
https://flamboyant-almeida-7a9bd0.netlify.app/
解决方法
最后我放弃了使用 masonry.js,因为 vue-stack-grid 提供了足够类似的目的并且在选项卡中工作