Masonry.js 生成无规则图片(高度不固定) 瀑布流

admin1年前javascript574
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
<script>
  var grid = document.querySelector('.caseList');
  var masonry = new Masonry(grid, {
    itemSelector: 'li',
    columnWidth: 200, // 列宽
    gutter: 0, // 间隙
    fitWidth: true // 适应容器宽度
  });
</script>
.caseList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-flow: dense; /* 密集填充 */
  gap: 0; /* 去除间隙 */
  margin: 0;
  padding: 0;
}

.caseList li {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

.caseList img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}


返回列表

上一篇:jsPDF 文字、图片生成PDF(解决中文乱码)

没有最新的文章了...

相关文章

Jquery (jquery.countup) 动画插件实现数字滚动增加动画

https://www.cnblogs.com/melancholys/p/16617331.html...

阿里oss压缩图片和获取视频第一帧简便方法

OSS获取视频第一帧方法: 视频地址+?x-oss-process=video/snapshot,t_1000,m_fast 例:https://video.aliyunoss.com/1.mp4?x...

uniapp执行npm命令失败

node在HBuilder x一直报错 重装node以及npm HBuilder关于node报错解决方法因为一年前安装过HBuilder以及node和npm, 今年没卸载就直接装了新的node所以导致...

超简单的 elementUi +Vue实现省市区三级联动

https://blog.csdn.net/no_equal/article/details/123429310...

ElementUI表单校验prop的嵌套写法

https://segmentfault.com/a/1190000023851366?sort=votes...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。