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

admin1年前javascript573
<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(解决中文乱码)

没有最新的文章了...

相关文章

rem与px换算的计算方式

rem与px换算的计算方式

前言这段时间的小项目中算是真正意义上使用了rem来进行移动端的页面布局,项目结束了我反思了一下之前的对于rem的使用...原来我以前对rem用法完全是在搞笑啊!!结合这次这个小项目,我觉得我也有必要对...

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

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

用rem怎么解决【移动端或pc端适配】问题?

https://blog.csdn.net/weixin_50450473/article/details/119169118...

JS——如何快速判断数组包含另一个数组的全部元素

const isContained = (a, b) => {     // a和...

国外测试,测评网站

https://pagespeed.web.dev/...

vuejs学习官网

https://cn.vuejs.org/...

发表评论    

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