第一次写滚动加载的vue瀑布流

2018-09-01 05:48:41来源：博客园阅读 ()

　
第一次博客，因为公司项目需求就自己写了一个滚动加载的vue瀑布流，总感觉哪里有问题，请各位大神指点指点

  1 <template>
  2     <div id="app">
  3         <div class="gridBox" @scroll="skinwheel($event)">
  4             <div class="gridBoxClass" ref="gridBoxClass">
  5                 <div class="grid" v-for="item in images" :key="item.id" ref="gridImg">
  6                     <p><img :src="item.imgurl" ref="images" class="img"></p>
  7                     <h2>图片的简洁</h2>
  8                     <p class="detail">图片详情</p>
  9                     <p class="author">作者</p>
 10                 </div>
 11             </div>
 12         </div>
 13     </div>
 14 </template>
 15 <script>
 16 export default {
 17     data() {
 18         return {
 19             images: null,
 20             lock: true,
 21             loadImg: 1
 22         }
 23     },
 24     created() {
 25         this.axios.get('/api/text/json1.txt').then((res) => {
 26             this.images = res.data.news;
 27 
 28         })
 29     },
 30     updated() {
 31         let image = new Image()
 32         for (let i = 0; i < this.images.length; i++) {
 33             image.src = this.images[i].imgurl
 34 
 35         }
 36         let imageArray = [0, 0, 0]
 37         image.onload = () => {
 38 
 39             for (let j = 0; j < this.$refs.gridImg.length; j++) {
 40 
 41                 let gridHeight = this.$refs.gridImg[j].clientHeight;
 42                 let min = Math.min(...imageArray);
 43                 let minIndex = imageArray.indexOf(min)
 44                 this.$refs.gridImg[j].style.top = imageArray[minIndex] + 'px'
 45                 this.$refs.gridImg[j].style.left = minIndex * 270 + 'px'
 46                 imageArray[minIndex] += gridHeight
 47 
 48             }
 49 
 50         }
 51     },
 52     methods: {
 53         skinwheel(event) {
 54             if (!this.lock) return;
 55             let vm = this
 56             let height = event.target.clientHeight;
 57             let scrollTop = event.target.scrollTop
 58             let clientHeight = parseInt(this.$refs.gridImg[this.$refs.gridImg.length - 1].style.top) + parseInt(this.$refs.gridImg[this.$refs.gridImg.length - 1].clientHeight)
 59             var skinscroll = (height + scrollTop) / clientHeight >= 0.7 ? true : false;
 60             if (skinscroll) {
 61                 this.lock = false;
 62                 this.loadImg++
 63                 this.axios.get(`/api/text/json${this.loadImg}.txt?t=${Date.now()}`).then(function (res) {
 64                     var data;
 65                     if (typeof res.data == 'string') {
 66                         data = JSON.parse(res.data)
 67                     } else {
 68                         data = res.data
 69                     }
 70                     if (data.news.length != 0) {
 71 
 72                         vm.images.push(...res.data.news)
 73                         vm.lock = true
 74                     }
 75                 })
 76 
 77             }
 78 
 79 
 80         },
 81     },
 82     watch: {
 83 
 84     }
 85 }
 86 </script>
 87 <style lang="stylus">
 88 * {
 89     margin: 0;
 90     paddimg: 0;
 91 }
 92 
 93 html, body {
 94     height: 100%;
 95     overflow: hidden;
 96 }
 97 
 98 #app {
 99     font-family: 'Avenir', Helvetica, Arial, sans-serif;
100     -webkit-font-smoothing: antialiased;
101     -moz-osx-font-smoothing: grayscale;
102     text-align: center;
103     color: #2c3e50;
104     width: 1000px;
105     margin: 0 auto;
106     height: 100%;
107     position: relative;
108     overflow: hidden;
109 
110     .gridBox {
111         position: relative;
112         width: 105%;
113         height: 100%;
114         overflow: auto;
115         paddimg-right: 2%;
116         box-sizing: border-box;
117 
118         .gridBoxClass {
119             position: relative;
120             height: 100%;
121 
122             .grid {
123                 position: absolute;
124                 width: 250px;
125                 margin-right: 20px;
126 
127                 .detail {
128                     padding: 20px;
129                 }
130 
131                 .author {
132                     text-align: right;
133                 }
134 
135                 .img {
136                     width: 250px;
137                 }
138             }
139         }
140     }
141 }
142 </style>