懒加载+瀑布流 vue

最新推荐文章于 2025-05-09 16:25:09 发布

原创最新推荐文章于 2025-05-09 16:25:09 发布 · 504 阅读

1 ·

CC 4.0 BY-SA版权

举个栗子：
在这里插入图片描述

// HTML：
	<div class="box">
		<div class="card">
			<div>
				<img @load="loadImg()" src="url" alt="" />			// 可以循环放图片
			</div>
		</div>
	</div>
//JS 
methods:{
	loadImg() {
		this.waterFall(4);		// 一排4个，可以根据宽度自动调整
	},
	waterFall(num) {			// 动态的计算位置
      // 瀑布流
      var cardW = parseInt($(".card").outerWidth());
      var hArr = [];
      $(".card").each((index, item) => {
        if (index < num) {
          $(item).css({
            top: 0,
            left: index * cardW + index * 18 + "px",
          });
          hArr.push($(item).outerHeight());
        } else {
          var minH = Math.min.apply(null, hArr);
          var minIndex = hArr.indexOf(minH);
          $(item).css({
            top: `${minH + 18}px`,
            left: `${cardW * minIndex + minIndex * 18}px`,
          });
          hArr[minIndex] = $(item).outerHeight() + 18 + hArr[minIndex];
        }
      });
      var maxH = Math.max.apply(null, hArr);
      $('.box').height(maxH + 10);
    },
}
 // css
 .box {
 	position:relative;
 .card {
 	position:absolute;
 	img {
      min-width: 50%;
      max-width: 100%;
      margin: 0 auto;
      cursor: pointer;
      margin-bottom: 6px;
      transition: all 0.3s;					
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      &:hover {					//实现缩放
        transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        opacity: 0.8;
      }
    }
 	}
 }