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

admin5个月前javascript187
<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(解决中文乱码)

没有最新的文章了...

相关文章

vue直传图片到阿里云OSS(单张直接上传)

https://blog.csdn.net/qq_44706619/article/details/121740097...

阿里云OSS缩略图

?x-oss-process=image/resize,w_200...

uniapp执行npm命令失败

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

vue-element-admin文档

https://panjiachen.gitee.io/vue-element-admin-site/zh/...

Nuxt详解+案例

https://blog.csdn.net/M_wzz/article/details/121914443...

发表评论    

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