ajax获取图片数据，实现瀑布流小功能

整体思路：

关键点：ajax获取数据，通过数据创建dom结构。

1. 获取后台图片数据：开启本地服务器Wampserver（已经配置好的）。前端用ajax获取获取图片数据
2. 动态创建DOM结构，然后插入HTML。
3. 需要通过冒泡排序来比对每一个li（图片都放在li里）的高度，以保证每张图能够一次插入最短的li当中；
4. 最后需要实现对scroll事件的监听，当用户浏览至底部时，我们需要加载新的一页的数据，然后再次进行页面渲染操作，这里我们通过将窗口高度跟滚轮scrollTop之和跟最短的li进行比较判断；

(function () {
    var num = 1;
    var oLi = $('li');
    var flag = false;
    getData();
    function getData() {
        if (!flag) {
            flag = true;
            $.ajax({
                type: 'GET',
                url: 'http://localhost/web/water/getPics.php?cPage=' + num,
                success: addDOM,
                beforeSend: function () {
                    $('.loading').show();
                },
                error: function () {
                    console.log(error);
                }
            })
            num++
        }

    }

    function addDOM(data) {
        $('.loading').hide();
        var dataList = JSON.parse(data);
        console.log(dataList);
        if (dataList) {
            
            dataList.forEach(function (ele, index) {
                var iDiv = $('<div class = "imgbox"></div>');
                var oDiv = $('<div class = "item"></div>');
                // var oA = $('<a href=' + ele.Image + '></a>');
                var oImg = new Image();
                var oP = $('<p></p>');
                // oA.text(ele.title);
                oP.text(ele.title);
                oImg.src = ele.preview;
                oImg.onload = function () {
                    oDiv.append(iDiv).append(oP);
                    iDiv.append(oImg);
                    var oIndex = getMinlist(oLi);//执行找最小高度li
                    $(oLi[oIndex]).append(oDiv);
                }
            })
        }
        flag = false;
    }
    function getMinlist(dom) {
        var minHeight = parseInt($(dom[0]).css('height'));
        var oIndex = 0;
        for (var i = 1; i < dom.length; i++) {
            var height = parseInt($(dom[i]).css('height'))
            if (height < minHeight) {
                minHeight = height;
                oIndex = i;
            }
        }
        // console.log(oIndex);
        return oIndex;
    }

    $(window).scroll(function () {
        var scrollHeight = $(window).scrollTop();
        var clientHeight = $(window).height();
        var minLiHeight = parseInt($(oLi[getMinlist(oLi)]).css('height'));
        console.log(scrollHeight, clientHeight, minLiHeight)
        if (scrollHeight + clientHeight > minLiHeight) {
            console.log('第二次加载');
            getData();
        }
    })
}())

下一步计划，封装成插件。

有兴趣可以私聊我拿代码。

原型上编程：

(function($) {
  function waterall() {
    this.init();
  }

  waterall.prototype = {
    init: function() {
      this.num = 1;
      this.oLi = $("li"); //四个li都获取了
      this.flag = false;
      this.getData();//获取数据
      this.addDom;   //创建动态dom
      this.scroll();  //检测滚动条
      this.getMinlist;  //查找高度最小li
    },

    getData: function() { 
      var self = this;
      console.log(self.flag)
      if (!self.flag) {
        self.flag = true;
        $.ajax({
          type: "GET",
          url: "http://localhost/web/water/getPics.php?cPage=" + self.num,
          success: self.addDOM.bind(self),
          beforeSend: function() {
            $(".loading").show();
          },
          error: function() {
            console.log(error);
          }
        });
      }
    },

    addDOM: function(data) {
      var self = this;
      console.log(this)
      $(".loading").hide();
      var dataList = JSON.parse(data);
      // dataList.length = 10;
      console.log(dataList);
      if (dataList) {
        self.num++;
        var self = this;
        dataList.forEach(function(ele, index) {
          var iDiv = $('<div class = "imgbox"></div>');
          var oDiv = $('<div class = "item"></div>');
          var oImg = new Image();
          var oP = $("<p></p>");
          oP.text(ele.title);
          oImg.src = ele.preview;
          oImg.onload = function() {
            oDiv.append(iDiv).append(oP);
            iDiv.append(oImg);
            var oIndex = self.getMinlist(self.oLi); //执行找最小高度li
            $(self.oLi[oIndex]).append(oDiv);
          };
        });
      }
      self.flag = false;
    },

    getMinlist: function(dom) {
      var minHeight = parseInt($(dom[0]).css("height"));
      var oIndex = 0;
      for (var i = 1; i < dom.length; i++) {
        var height = parseInt($(dom[i]).css("height"));
        if (height < minHeight) {
          minHeight = height;
          oIndex = i;
        }
      }
      // console.log(oIndex);
      return oIndex;
    },
    
    scroll: function() {
      var self =this;
      $(window).scroll(function() {
        var scrollHeight = $(window).scrollTop();
        var clientHeight = $(window).height();
        var minLiHeight = parseInt($(self.oLi[self.getMinlist(self.oLi)]).css("height"));
        // console.log(scrollHeight, clientHeight, minLiHeight);
        if (scrollHeight + clientHeight > minLiHeight) {
          console.log("第"+self.num +"次加载");
          self.getData();
        }
      });
    }
  };
  new waterall();
})($);