美文网首页
masonry.js 踩的坑

masonry.js 踩的坑

作者: Amfishers | 来源:发表于2017-11-04 17:45 被阅读278次

最近用到瀑布流使用的插件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啦~~

官网链接

相关文章

  • masonry.js 踩的坑

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

  • D1094:踩坑的价值最大化

    是人就会踩坑,不踩坑理论上就不属于人类,踩坑是人之常情,能回头站在坑边反思,才是对踩过的的坑价值最大化的体现,要不...

  • JavaScrip-StepPitGuide《JavaScrip

    《JavaScript踩坑指南》JavaScrip-StepPitGuide? 《JavaScript踩坑指南》 ...

  • 算法踩坑6-二叉搜索树排序

    背景 接上面五篇文章算法踩坑-快速排序 算法踩坑2-插入排序 算法踩坑3-堆排序 算法踩坑4-冒泡排序 ...

  • 算法踩坑5-归并排序

    背景 接上面四篇文章算法踩坑-快速排序 算法踩坑2-插入排序 算法踩坑3-堆排序 算法踩坑4-冒泡排序 来...

  • 交互设计师所要避免的几个坑

    前言 工作中难免会踩到几个坑,即使现在不踩以后还会踩,只有踩过才会深刻记住,踩过说明爱过!但是踩过的坑必须把坑填满...

  • 踩坑,使用cocoaPods import导入时没有提示的解决办

    续上篇写的,踩坑,cocoaPods ---- framework not found Pods之后 ,又踩坑了。...

  • 随笔

    读书啊,就是一个坑踩完了又掉进另一个坑,先说踩读书没用的坑,爬出来了,再踩读书要多的坑,之后再踩读书要精啊,读书要...

  • PHP中的数据类型

    一说到数据类型,这个坑就太多了,多到有哪些坑,有多少坑,不知道自己还会踩哪些坑,以及踩过的坑还会不会再踩,我对...

  • 2020-10-19随笔 踩坑0传值

    踩坑:当值传入0时,if条件判断时候会自己转换,记录踩坑。

网友评论

      本文标题:masonry.js 踩的坑

      本文链接:https://www.haomeiwen.com/subject/mafqmxtx.html