masonry.js 踩的坑

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

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

解决办法.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啦~~

官网链接

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • JavaScript 资源大全中文版很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的...
    wwmin_阅读 3,535评论 1 91
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,267评论 4 61
  • 文/若影随行 〈二〉咫尺天涯 薇薇一早被闹钟铃声叫醒,昨天仿佛很遥远的事,今天又是新一天的开始。 上班前十分钟,照...
    旦是但是阅读 783评论 0 4
  • 突然觉得人如果不用吃饭多好?突然又想起人活着是为了吃饭,吃饭是为了活着的理论了。老疏说,吃饭就是在受罪。那是因为有...
    独凌寒冰冰阅读 160评论 0 0
  • 虽然如今好的配色方案已经唾手可得,但想为数据可视化找到合适的配色方案,难度仍然不小。因信息图的独特属性,在保证色彩...
    打豆豆阅读 2,120评论 0 3