如何在vue中实现isotope插件效果的瀑布流？

Question

isotope官网

如上图所示为js插件isotope实现的效果。

而我找到的vue版本的 vue-isotope，只能实现每列下宽度一样的瀑布流。

我尝试导入isotope的js文件直接使用

然后报错提示我

(JQ方式，JQ已正确导入)

$(...).isotope is not a function

(JS方式)

Isotope is not defined

我引入的另一个dotdotdot的js插件正确生效并可以使用

import isotope from '../../static/js/isotope.pkgd.min.js'

import dotdotdot from '../../static/js/jquery.dotdotdot.min.js'

titDotdotdot: function(){
      $('.list-item-tit, .list-item-intro').dotdotdot({
        watch: 'window',
        wrap:'letter',
        ellipsis: '……',
      });
},
isotope : function() {
    //瀑布流
    $('.grid').isotope({
        layoutMode: 'fitRows',
        itemSelector: '.grid-item',
        percentPosition: true,
    });
}

请问如何在vue上正确的使用isotope使它生效？或是可以使用其他vue相关的瀑布流模块？

(更新，已经找到解决方法，在axios获取数据赋值完之后，用$nextTick再去执行原生JS的初始化)

Answer 1

你如果是官网下载的不是vue版本的，那么直接在index.html里用script的方式引入。在vue文件里用全局方式的方法的引用