前端使用masonry瀑布流式布局

@前端使用瀑布流式布局

引入插件 masonry.js

html 代码

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，则会从下到上排序
  })