javascript - Masonry.js不应用布局

我正在使用Laravel，VueJS和Masonry.js库创建一个动态画廊，而我遇到了一个奇怪的问题。

我的VueJS模板中有这个：

<template lang="html">
  <div id="uploads-grid">
    <div class="grid" ref="grid">

      <!-- GRID START -->

      <div class="grid-item white-outline" v-for="(bg, index) in bgs" :style="'width:' + wd + 'px;height:' + hg[index] + 'px;'">
        <img :src="'/storage/users/1/photos/1/' + bg.photo" :width="wd" :height="hg[index]">
      </div>

      <!-- GRID END -->

    </div>
  </div>
</template>

这就是我获取图像的方式：

<script>

import Masonry from 'masonry-layout';

export default {
  data() {
    return {
      bgs: [],
      wd: '300',
      hg: []
    }
  },
  methods: {
    getPhotos() {
      var url = '/photos/get'
      axios.get(url).then(r => {
        this.bgs = r.data
        for (var i = 0; i < r.data.length; i++) {
          var factor = r.data[i].width / 300
          var resizeHeight = Math.floor(r.data[i].height / factor)
          this.hg.push(resizeHeight)
        }
      });
    }
  },
  mounted() {
    let $masonry = new Masonry(this.$refs.grid, {
      itemSelector: '.grid-item',
      columnWidth: 300,
      isFitWidth: true
    });
  },
  created() {
    this.getPhotos()
  }
}
</script>

问题在于，每个图像都出现在最后一个图像下面。

无论哪种方式，这另一段代码都可以正常工作：

<template lang="html">
  <div id="uploads-grid">
    <div class="grid" ref="grid">

      <!-- GRID START -->

      <div class="grid-item white-outline" v-for="(bg, index) in bgs" :style="'width:' + wd[index] + 'px;height:' + hg[index] + 'px;'">
        <img :src="bg">
      </div>

      <!-- GRID END -->

    </div>
  </div>
</template>

<script>

import Masonry from 'masonry-layout';

export default {
  data() {
    return {
      bgs: [],
      wd: [],
      hg: []
    }
  },
  methods: {
    rndBg() {
      for (var i = 0; i < 20; i++) {
        var wd = 300
        var hg = Math.floor(Math.random() * 350) + 150
        var bgsrc = 'https://placehold.it/' + wd + 'x' + hg
        this.bgs.push(bgsrc)
        this.wd.push(wd)
        this.hg.push(hg)
      }
    }
  },
  mounted() {
    let $masonry = new Masonry(this.$refs.grid, {
      itemSelector: '.grid-item',
      columnWidth: 300,
      isFitWidth: true
    });
  },
  created() {
    this.rndBg()
  }
}
</script>

问题是我使用的是placeholdit虚拟图像，而不是我想要的图像...我不适合我。我使用的是相同的逻辑，但是...是的，我无法使其正常工作。

最佳答案

要点：添加新图像后，您必须再次触发石工。

砌筑通过将固定位置，宽度等设置到元素来进行。因此，每次添加/删除某些内容时，都应触发Masonry重新计算并重新设置固定位置，宽度等。

例如https://codesandbox.io/s/4xw830q1r4组件/Hello.vue

<template>
    <div class="hello">
        <button @click="addImg"> add img </button>
        <br/><br/>
        <div class="grid">
            <div class="grid-item"  v-for="img in imgs">
                <img :src="img">
            </div>
        </div>
    </div>
</template>

<script>
    import Masonry from 'masonry-layout';

    export default {
  name: 'hello',
  data () {
    return {
            imgs:[
                `https://unsplash.it/200/300/?random=${Math.random()}`,
                `https://unsplash.it/200/100/?random=${Math.random()}`,
                `https://unsplash.it/200/400/?random=${Math.random()}`,
                `https://unsplash.it/200/250/?random=${Math.random()}`
            ]
    }
  },
    mounted() {
        this.triggerMasonry();
    },
    methods:{
        triggerMasonry() {
            console.log('triggerMasonry');
            var grid = document.querySelector('.grid');
            var msnry = new Masonry( grid, {
                itemSelector: '.grid-item',
                columnWidth: 200
            });
        },
        addImg(){
            this.imgs.push(`https://unsplash.it/200/300/?random=${Math.random()}`);
            this.$nextTick(()=>{
                this.triggerMasonry();
            });
        }
    }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.grid {
    width: 100%;
    img {
        width: 100%;
    }
}
</style>

triggerMasonry上的mounted，以及添加新图像后的triggerMasonry。

仅在将图像添加到DOM之后，您还需要使用nextTick到triggerMasonry。