[关闭]
@Wangww0925 2019-08-07T05:47:05.000000Z 字数 4936 阅读 268

vue-cli 瀑布流

vue-cli

注意事项

瀑布流结合了 onresize事件、onscroll事件。onresize事件主要是为了监听窗口尺寸变化；onscroll事件主要是为了滚动到底部加载更多数据

变量、函数说明：

瀑布流的实现逻辑（具体参照例子)

例子：

vue文件

  1. <template>
  2.     <div>
  3.         <ul class="article_list w" ref="article_list">
  4.             <li class="item" v-for="(item,i) in imgsArr">
  5.                 <router-link :to="{path:'Detail', query: {id: item.id} }">
  6.                     <img class="w" :src="item.path" alt="">
  7.                     <p class="ti24" v-text="item.summary"></p>
  8.                 </router-link>
  9.             </li>
  10.         </ul>
  12.         <div v-if="!isMore">
  13.             <p class="tc" v-text="isMoreText"></p>
  14.         </div>
  16.         <div class="loading tc" v-if="isFirstLoad" style="font-size: 30px;">正在加载中...</div>
  17.     </div>
  18. </template>
  20. <script>
  21.     import store from '@/store/store';
  23.     export default {
  24.         store,
  25.         data () {
  26.             return {
  27.                 ajaxData:{ // 列表请求数据
  28.                     page: 0,    // 当前加载的加载图片的次数
  29.                 },
  30.                 imgsArr: [],                    // 列表数据
  31.                 isFirstLoad:true,               // loading
  32.                 isMore:true,                    // true-还有更多
  33.                 isMoreText:'没有更多的内容了',
  34.                 isPreloading:true,              // 滚动到底部,并且能获取数据
  35.             }
  36.         },
  37.         methods: {
  38.             DateRenew(){ // 列表初始化
  39.                 this.imgsArr = [];          // 列表数据
  40.                 this.ajaxData.page = 0;     // 页码
  41.                 this.removeScroll();
  42.                 this.scroll();
  43.                 this.getData();
  44.             },
  45.             getData() { // 请求列表
  46.                 console.log(this.ajaxData)
  47.                 this.isFirstLoad = true; // loading显示
  48.                 this.$http.get("http://118.24.194.224:20001/api/blog/article-list")
  49.                 .then((res)=>{
  50.                     this.ajaxData.page++
  52.                     let result = res.data.body.data
  53.                     console.log(res)
  55.                     this.ajaxData.page == 0 ? this.imgsArr = [] : "";  // 避免多次请求出现数据重复
  56.                     this.imgsArr = this.imgsArr.concat(result)
  58.                     this.getPosition()
  59.                     this.isFirstLoad = false; // loading隐藏
  60.                 },(res)=>{
  61.                     console.log(res)
  62.                 })
  63.             },
  64.             getPosition() { // 不固定列宽的瀑布流
  65.                 let that = this;
  66.                 let $ul = that.$refs.article_list;
  67.                 let spacingW = 15; // 间距
  68.                 var columnNum = 2;  // 一列个数
  70.                 // 延迟是为了解决ul下的li获取不到问题
  71.                 setTimeout(function (){
  72.                     let ulW = $ul.offsetWidth;
  73.                     let listArr = [];  // 存放每个li的top + height值
  74.                     let $list = $ul.children;
  76.                     ulW > 900 ? columnNum = 3 : "";  // 大于宽度900的列数为 3
  78.                     // 如果宽度相等，不执行定位
  79.                     if(ulW < 700){
  80.                         $ul.style.height = "auto"
  81.                         for(var j = 0; j < $list.length; j++){
  82.                             $list[j].style.position = "";
  83.                             $list[j].style.width = "100%";
  84.                             $list[j].style.marginBottom = "15px";
  85.                             $list[j].setAttribute("class","item fadeOut");
  86.                         }
  87.                     }
  89.                     // 瀑布流布局逻辑
  90.                     if(ulW >= 700){
  91.                         for(var i = 0; i < $list.length; i++){
  92.                             $list[i].style.position = "absolute";
  93.                             $list[i].style.marginBottom = "0px";
  95.                             // 设置列宽
  96.                             let liW = (ulW - spacingW * (columnNum - 1)) / columnNum; // 每个宽度 = （总宽 - 间距）/ 一列个数
  97.                             $list[i].style.width = `${ liW }px`;
  99.                             // 当前列高
  100.                             let liH = $list[i].offsetHeight;
  102.                             // 设置 top 值；小于一行的个数top都为0
  103.                             if(i < columnNum){
  104.                                 $list[i].style.top = 0;
  105.                                 $list[i].style.left = `${ (liW + spacingW) * i }px`;
  106.                                 listArr[i] = liH;
  107.                             }else{
  108.                                 let minTopHeight = Math.min.apply(null, listArr); // 获取数组中的最小值
  109.                                 let minIndex = listArr.indexOf(minTopHeight); // 获取数组中最小值的索引
  111.                                 let liTopHeight = minTopHeight + spacingW; // 当前 top = 上一行对应列的top + 上一行对应列的height + 间距
  112.                                 $list[i].style.top = `${ liTopHeight }px`;
  114.                                 $list[i].style.left = `${ $list[minIndex].offsetLeft }px`; // left = 最低高的left
  116.                                 listArr[minIndex] = $list.length * 500;  // 确保下一次获取最小值时不会再次获取到；$list.length * 500 让其一定比数组中所有的值大
  118.                                 listArr[i] = liTopHeight + liH; // 将当前top + 当前height 放到数组中
  119.                             }
  121.                             $list[i].setAttribute("class","item fadeOut");
  122.                         }
  124.                         let lastEle = $list[$list.length - 1]; // 获取最后一个li
  125.                         $ul.style.height = `${lastEle.offsetTop + lastEle.offsetHeight + 50 }px`; // 设置ul高度 = 最后一个li的top + 最后一个li的height + 50
  126.                     }
  128.                     // 判断无更多数据
  129.                     // 由于setTimeout是异步，所以isMore不能在返回数据时就判断，会照成没有更多内容提早显示，给用户造成体验不好的感觉
  130.                     if (that.ajaxData.page === 3) { // 模拟已经无新数据
  131.                         that.removeScroll()
  132.                         that.isMore = false;
  133.                         that.isPreloading = false;
  134.                     }else{
  135.                         that.isMore = true;
  136.                         that.isPreloading = true; // 滚动到底部还原，让其可以继续加载数据
  137.                     }
  138.                 },500)
  139.             },
  140.             scroll(){ // 绑定滚动事件
  141.                 window.addEventListener('scroll', this.scrollFun,true)
  142.             },
  143.             scrollFun(){ // 处理滚动事件
  144.                 let $ul = this.$refs.article_list;
  145.                 let innerHeight = $ul.clientHeight; // 可滚动容器的高度
  146.                 let outerHeight = document.documentElement.clientHeight; // 屏幕尺寸高度let 
  147.                 let scrollTop = document.documentElement.scrollTop;  // 可滚动容器超出当前窗口显示范围的高度
  149.                 // 判断滚动到底部
  150.                 if (innerHeight < (outerHeight + scrollTop)) {
  151.                     if (this.isPreloading && !this.isMore){ // 可以加载数据，并且数据没有全部加载完毕
  152.                         this.isPreloading = false // 滚动到底部不能加载数据，等待数据处理完毕时才可以加载数据
  153.                         this.getData() // 加载数据
  154.                     }
  155.                 }
  156.             },
  157.             removeScroll(){ // 解除滚动事件
  158.                 window.removeEventListener('scroll', this.scrollFun)
  159.             }
  160.         },
  161.         created : function (){
  162.             // console.log("2 - created 实例对象创建完成")
  163.             this.DateRenew()
  164.         },
  165.         watch:{ // 监听
  166.             '$store.state.windowResizeW':function(){ // 监听屏幕宽度变化
  167.                 this.getPosition()
  168.             },
  169.             '$store.state.windowResizeH':function(){ // 监听屏幕高度变化
  170.                 this.getPosition()
  171.             }
  172.         }
  173.     }
  174. </script>
  176. <style scoped lang="stylus">
  177.     .w
  178.         width:100%;
  180.     .ti34
  181.         text-indent:24px;
  183.     .tc
  184.         text-align: center;
  186.     .boxShadow
  187.         box-shadow:0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12), 0 -1px 0.5px 0 rgba(0,0,0,0.09);
  189.     vendor(prop, n)
  190.         -webkit-{prop}:n;
  191.         -moz-{prop}:n;
  192.         -ms-{prop}:n;
  193.         -o-{prop}:n;
  194.         {prop}:n;
  196.     .item
  197.         width:100%;
  198.         background-color:#fff;
  199.         padding:10px;
  200.         opacity:0;
  201.         vendor('transition',opacity 2s)
  203.         &:hover
  204.             vendor('transform', translateY(-1px));
  205.             box-shadow: 0 1px 3px rgba(0,0,0,.02), 0 9px 15px -4px rgba(0,0,0,.17);
  207.     .fadeOut
  208.         opacity:1;
  210.     .loading
  211.         height:50px;
  212.         line-height:50px;
  213.         text-align:center;
  215.     @media screen and (min-width: 992px)
  216.         .article_list
  217.             position:relative;
  219.             .item
  220.                 @extend .boxShadow;
  221. </style>

作者 wendy
2019 年 1月 4日

参考文献

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注