vue 간단 한 폭포 흐름 구조 실현

vue 폭포 흐름 구 조 를 간단하게 실현 하 는 방식(vue 폭포 흐름 구성 요소)을 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
vue 의 폭포 흐름 레이아웃 구성 요소
수요:그림 용기 의 너비 가 고정 되 고 높이 는 그림 에 따라 적응 되 며 그림 의 한 줄 이 배열 되 지 않 을 때 줄 을 바 꾸 어 왼쪽 에서 오른쪽으로 배열 합 니 다.(스 트 라 이 프 콘 셉 트

또한 vue-lazy 와 결합 하여 게 으 른 로드 실현(npm i vue-lazyload--save-dev)
사용 도 간단 합 니 다.게 으 름 피 워 야 할 img 태그 에서:src 를 v-lazy 로 바 꿉 니 다.
부모 구성 요소 전달 데이터:

 waterfallData:[
 {
 e_img: "test.jpg",
 //   
 e_intro: "    ",
 u_img: "test.jpeg",
 //    
 u_name: "   "},
 {
 e_img: "test.jpg",
 e_intro: "    ",
 u_img: "test.jpeg",
 u_name: "   "}
 ]

고정 폭 부정 고 폭포 유포 국 서브 모듈

<template>
<div>
 <div class="waterfall px-container clearfix" v-cloak>
 <ul class="px-waterfall left" v-for="(el,i) in newWaterfallData" :key="i">
 <li v-for="(item,index) in el" :key="index">
 <div style="position: relative;" >
  <router-link to="/goodsdetail/1">
   <img v-lazy="item.e_img" class="bg-img" alt="" v-loading="true">
  </router-link>
  <div class="px-hot-tag" v-if="item.u_img">
   <img :src="item.u_img" alt="" >
  </div>
 <h3 class="font22 color-fff fh" v-if="item.e_intro"> {{item.e_intro}}</h3>
  </div>
 </li>
 </ul>
 </div>
</div>
</template>
<script>
export default {
 data() {
 return {
 newWaterfallData: '',
 waterfallDataNumber:''
 }
 },
 created() {
 let [ ...waterfallData ] = this.waterfallData
 let [ ...newWaterfallData ]= [[],[],[]]
 waterfallData.forEach((el,i) => {
 switch( i%3 ) {
 case 0 : newWaterfallData[0].push(el)
  break
 case 1: newWaterfallData[1].push(el)
  break
 case 2: newWaterfallData[2].push(el)
  break
 }
 });
 this.newWaterfallData = newWaterfallData
 },
 props: [ 'waterfallData' ]
}
</script>
<style lang="scss">
 .px-container {
 width: 100%;
 max-width: 1200px;
 margin: 0 auto;
 }
 .clearfix:before,
 .clearfix:after {
 content: "";
 display: block;
 clear: both;
 }
 .clearfix {
 zoom: 1;
 }
 .left {
 float: left;
 }
 . font22{
 font-size:22px;
 } 
 .color-fff {
 color:#fff;
 }
 .fh {
 overflow:hidden;
 }
 [v-cloak]{
 display: none!important;
 }
 .waterfall {
 margin-top: 20px;
 }
 .px-waterfall {
 width: calc(380px);
 &:nth-child(3n+2) {
 margin: 0 30px;
 }
 img.bg-img {
 border-radius: 8px;
 }
 h3 {
 text-overflow:ellipsis;
 white-space: nowrap;
 text-overflow: ellipsis;
 height:30px;
 font-family:PingFangSC-Semibold;
 font-weight:600;
 line-height:30px;
 letter-spacing:6px;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 z-index: 999;
 }
 li{
 background: #fff;
 border-radius: 8px;
 margin-bottom: 20px;
 }
 }

 .px-hot-tag {
 position: absolute;
 top: 0;
 border-radius: 8px;
 width: 71px;
 height: 30px;
 img {
 border-radius: 8px 0 8px 0;
 }
 }
 .photo{
 position: relative;
 height: 25px;
 .keywordbox {
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%,-50%);
 height: 25px;
 }
 }
 .keyword {
 height: 25px;
 line-height: 25px;
 padding: 0 22px;
 text-align: center;
 .color-666-line {
 border-bottom:2px solid #666666;
 }
 .red-line {
 border-bottom:2px solid #F65050;
 }
 }
</style>

문제 가 있 으 면 지적 을 환영 합 니 다.좋 은 방안 이 있 으 시 면 저 와 공유 해 주 십시오!
더 많은 글 은Vue.js 전단 구성 요소 학습 튜 토리 얼을 클릭 하여 읽 기 를 배 울 수 있다.
vue.js 구성 요소 에 대한 튜 토리 얼 은 주제vue.js 구성 요소 학습 강좌를 클릭 하여 학습 하 십시오.
더 많은 vue 학습 튜 토리 얼 은 주 제 를 읽 으 세 요《vue 실전 교정》.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.