图片自适应弹性布局排版效果+图片加载缓冲过渡效果

看下效果：

1、网络慢情况图片加载过度效果

2、图片弹性布局，更具随机窗口大小等比例拉伸，错乱开，并且不影响原图片大小。

按照随机不等长度排列：每一行的图片个数不均等，等比拉伸

css代码：

.pic .img_wrap {
  min-height: calc(100vh - 450px);
  display: flex; /*显示模式设置为弹性盒子*/
  flex-wrap: wrap; /*进行强制换行*/

  .item_img_div {
    position: relative;
    cursor: pointer;
    margin: 6px;
    flex-grow: 1; /*进行按比例伸缩，窗口大小改变时候div盒子可以自适应等比改变宽度*/
    overflow: hidden;
    border-radius: 4px;
    // 180px;
    height: 185px;   //设置每张通用高度
    &:extend(.background_style);

    &:nth-child(1n+0) { //利用伪元素进行计算每张排列
      height: 185px;
       215px !important;
    }

    &:nth-child(2n+0) {  //设置图片双数的宽度
      height: 185px;
       265px !important;
    }

    &:nth-child(3n+0) {  //设置图片为3的倍数位置（单数）的宽度
      height: 185px;
       230px !important;
    }

    &:nth-child(3n+3) {   //再随机设置下3倍数情况下的后3张得宽度，可以使得随机排列更随机一些不单单单双数给的两个宽度
      height: 185px;
       250px !important;
    }

    img {
      border-radius: 4px;
       100%;
      height: 100%;
      object-fit: cover; /*进行裁切，并且图片按比例缩放*/
      transition: 0.3s;

      &:hover {
        transform: scale(1.1);
      }
    }
  }
}

.img_wrap:after {
  /*对最后一个伪元素进行最大限度伸缩*/
  content: ' ';
  flex-grow: 999999999999999999999999999999999999;
}

/**   图片加载动效效果 **/

.background_style {
  background: #f6f7f8;
  background-image: linear-gradient(90deg, #cce5f8 0, #fdfdfd 20%, #cce5f8 40%, #f6f7f8);
  background-repeat: no-repeat;
  background-size: 800px 304px;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: mymove;
  animation-name: mymove;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@keyframes mymove {
  from {
    background-position: right;
  }
  to {
    background-position: left;
  }
}

html代码，imageData是图片数组

<div  className={styles.img_wrap}>
  {imageData.map((item, index) => {
    return (
      <div className={styles.item_img_div}>
        <img  src={'图片地址'} alt=""/>
      </div>
    );
  })}
</div>

图片自适应弹性布局排版效果+图片加载缓冲过渡效果

相关推荐