前端使用masonry瀑布流式布局

全赣州最老实的男人guoy

已于 2022-05-17 14:26:54 修改

阅读量668

点赞数 1

分类专栏：前端文章标签：前端 javascript css

于 2022-05-17 14:01:19 首次发布

本文链接：https://blog.csdn.net/weixin_43827751/article/details/124820069

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

@前端使用瀑布流式布局

引入插件 masonry.js

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

html 代码

<body>
	<div id="grid">
	  <div class="grid-item">
	    <img src="images/Slice%201.png" alt="">
	  </div>
	  <div class="grid-item">
	    <img src="images/Slice%203.png" alt="">
	  </div>
	  <div class=" grid-item">
	    <img src="images/Slice%201(1)%20-%20副本.png" alt="">
	  </div>
	  <div class="grid-item">
	    <img src="images/Slice%201.png" alt="">
	  </div>
	  <div class="grid-item">
	    <img src="images/Slice%201.png" alt="">
	  </div>
	  <div class="grid-item">
	    <img src="images/Slice%201.png" alt="">
	  </div>
	  <div class="grid-item">
	    <img src="images/Slice%201.png" alt="">
	  </div>
	  <div class="grid-item">
	    <img src="images/Slice%201.png" alt="">
	  </div>
	  <div class="grid-item">
	    <img src="images/Slice%201(2)%20-%20副本.png" alt="">
	  </div>
	  <div class="grid-item">
	    <img src="images/Slice%205.png" alt="">
	  </div>
	  <div class="grid-item ">
	    <img src="images/Slice%201.png" alt="">
	  </div>
	  <div class="grid-item">
	    <img src="images/Slice%201.png" alt="">
	  </div>
	  <div class="grid-item">
	    <img src="images/Slice%201(2).png" alt="">
	  </div>
	  <div class="grid-item">
	    <img src="images/Slice%201.png" alt="">
	  </div>
	</div>
</body>

css 代码

    .grid-item {
        position: relative;
        width: 25%;
        border: 2px solid hsla(0, 0%, 0%, 0.5);
        box-sizing: border-box;
        counter-increment: count;
    }


    .grid-item img {
        display: block;
        height: auto;
        width: 100%;
    }


    .grid-item::after {
        position: absolute;
        display: block;
        top: 2px;
        left: 2px;
        width: 24px;
        height: 24px;
        text-align: center;
        line-height: 24px;
        background-color: #000;
        color: #fff;
        content: counter(count);
    }

javaScript

  const dom = document.getElementById('grid');
  new Masonry(dom, {
    itemSelector: '.grid-item',
    percentPosition: true, //使用百分比宽度的响应式布局
    horizontalOrder: true, //对项目进行布局以保持水平的从左到右的顺序,定义了此条件，照片一般会按照从左到右顺序排列，但也不是绝对的。
    originLeft: true, //设置布局方式为从左到右，此项是默认值，可以不填写，如果你设置值为false，则会从右到左排序
    originTop: true,//设置布局方式为从上到下，此项是默认值，可以不填写，如果你设置值为false，则会从下到上排序
  })

在这里插入图片描述

全赣州最老实的男人guoy

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端使用masonry瀑布流式布局

@前端使用瀑布流式布局引入插件 masonry.js<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>html 代码<body> <div id="grid"> <div class="grid-item"> <img src="images/Slice%201.png" alt="">
复制链接

扫一扫