zoukankan      html  css  js  c++  java
  • 关于瀑布流

    前面文章《vuejs实现瀑布流布局(一)》和《vuejs实现瀑布流布局(二)》已经介绍了瀑布流的基本实现的一种方法,虽然是在vuejs中实现的,可是实际上也可以把这段代码扒出来,在我们的任何项目中使用,并不局限于vuejs。

    我也在项目中用这段代码实现了这种瀑布流。

    后来发现一个问题,就是瀑布流布局会在每次刷新之后,排序发生变化,如果讲究一点的话,其实并没有什么特别大的影响,可是如果追求精益求精的话,确实不太理想。

    看一下,瀑布流实现的关键性代码:

    $("#items").children("li").each(function (index, val) {
        var $this = $(this);
        var $img = $this.find("img").first();
        $img.on("error", function () {
            $img.attr("src", "../src/assets/images/default.png");
        });
    
        if ($img.get(0).complete) {
            addItems();
        } else {
            $img.on("load", function () {
                addItems();
            });
        }
    
        function addItems() {
            if(_this.leftHeight <= _this.rightHeight){
                $l.append($this);
                _this.leftHeight = $l.height();
            }else{
                $r.append($this);
                _this.rightHeight = $r.height();
            }
        }    
        $.refreshScroller();
    });
    

      其中的addItems就是布局瀑布流的,但是当前存在的问题就是:当从后台取回数据之后,在id="items"的ul中渲染每一项列表时,一旦图片加载完成,就立马将其布局到页面中,这就必然导致每次刷新之后页面布局排序的顺序有所不同,因为我们没有办法预计哪条数据中的图片加载先完成。

    如此,如果需要修复这个问题的话,似乎只有一个可提供的方案,等待所有图片在<ul id="items"></ul>中加载完成,然后在按顺序布局到页面中。

    定义一个全局变量:

    imgs: {
        imgLoad: [],
        loadNums: 0
    }
    

      在数据请求回来之后,把新请求回来的数据赋值给imgs.imgLoad,以保证imgs.imgLoad里面所存储的数据都是刚刚请求回来的数据,然后在<ul id="items"></ul>渲染之前,将imgs.loadNums = 0;重新赋值为0,然后<ul id="items"></ul>的列表li每次渲染加载img成功之后imgs.loadNums++,当imgs.loadNums值等于imgs.imgLoad的数组长度的时候,再开始页面布局。

    $("#items").children("li").each(function (index, item) {
                var $this = $(item);
                var _img = $(item).find("img").first();
                _img.on("error", function () {
                  _img.attr("src", "../src/assets/images/default.png");
                });
                
                _this.leftHeight = $l.height();
                _this.rightHeight = $r.height();
                if(_img.get(0).complete){
                  _this.imgs.loadNums++
                } else {
                  _img.on("load", function () {
                    _this.imgs.loadNums++
                    waterfallLayer();
                  })
                }
              })
    
              waterfallLayer()
              function waterfallLayer() {
                if (_this.imgs.loadNums == _this.imgs.imgLoad.length) {
                  $("#items").children("li").each(function (index, item) {
                    if(_this.leftHeight <= _this.rightHeight){
                      $l.append($(item));
                      _this.leftHeight = $l.height();
                    }else{
                      $r.append($(item));
                      _this.rightHeight = $r.height();
                    }
                  })
                }
              }
    

      就此保证了,不管怎么刷新页面,数据排序都是一致的。

  • 相关阅读:
    Python 实现AEC CBC 加密解密方式
    redis 发布订阅方法与缺陷
    python paramiko 传输下载文件
    Redis 配置文件
    Redis 命令
    window11 | 虚拟机vmWare安装windows11
    十万个为什么 | 文化001-为什么猜灯谜又叫做打灯谜
    ffmpeg | 常用命令使用
    ffmpeg | 常用命令使用
    Adobe系列 | Animate(01)-软件安装
  • 原文地址:https://www.cnblogs.com/zhuhuoxingguang/p/7477047.html
Copyright © 2011-2022 走看看