masonry.js 踩的坑

最近用到瀑布流使用的插件masonry.js 时,当item宽度的不同尺寸超过三个的时候,发现靠近边缘的一个 老是掉下来。甚是麻烦...

后来翻了一下官网,才最终解决了bug

masonry.js 踩的坑_第1张图片
解决办法.jpg

原因是:
当我们配置项没有写上 columnWidth 的时候,插件会将第一个item作为卡片的通用尺寸。官网也有做如下警告提示:

We recommend setting columnWidth. If columnWidth is not set, Masonry will use the outer width of the first item.

所以在加入一个空的item,然后配置项加上columnWidth,
插件就会正确识别不同width啦~~

官网链接

你可能感兴趣的:(masonry.js 踩的坑)