1、思路

懒加载的思路的关键点是判断一个元素是否在窗口内，如果解决了这个问题，懒加载的问题就可以迎刃而解，我们通过一张图来解释页面元素在窗口中的距离关系

image.png

这样通过判定当$(node).offset().top < $s(window).scrollTop() + $(window).height()的时候元素就出现在了窗口中。

瀑布流的关键点是，图片的宽度是固定的，所以可以通过将每一张图片在窗口中并列排放，这个时候就要用到绝对定位，通过在每张图片加载过后第一列元素列，找到其中最低的一项，将第二排的第一个元素放在这项的下面，绝对定位的值是{left: idx * width , top: $el.height}，就可与达到瀑布流的排列效果。

2、代码

懒加载

var Exposure = {

    init: function($target, handler) {
  console.log('a')
      this.$c = $(window);
      this.$target = $target;
      this.handler = handler;
  
      this.bind();
      this.checkShow();
    },
  
    bind: function() {
        var me = this,
        timer = null,
        interval = 100;
      $(window).on('scroll', function(e) {
          console.log('a')
        timer && clearTimeout(timer);
        timer = setTimeout(function() {
          me.checkShow();
        }, interval);
      });
  
    },
  
    checkShow: function() {
      var me = this;
      console.log('a')
      this.$target.each(function() {
  
        var $cur = $(this);
        if (  me.isShow($cur) ) {
          me.handler && me.handler.call(this, this);
          $cur.data('loaded', true);
        }
      });
    },
  
    isShow: function($el) {
        console.log('a')
      var scrollH = this.$c.scrollTop(),
        winH = this.$c.height(),
        top = $el.offset().top;
  
      if (top < winH + scrollH) {
        return true;
      } else {
        return false;
      }
    },
  
    hasLoaded: function($el) {
        console.log('a')
      if ($el.data('loaded')) {
        return true;
      } else {
        return false;
      }
    }
  
  };

瀑布流

var waterfall = {

    //[0,0,0,0]
    //[20, 10, 30, 15]

    arrColHeight: [],

    init: function( $ct ){
        this.$ct = $ct;
        this.arrColHeight = [];

        this.bind();
        this.start();
    },

    bind: function(){
        var me = this;
        $(window).on('resize', function(){
            me.start();
        });
    },

    start: function($nodes){
        var me = this;
        this.$items = this.$ct.find('.item');
        if(this.$items.length ===0) return;
        this.itemWidth = this.$items.outerWidth(true);
        this.$ct.width('auto');
        this.colNum = Math.floor( this.$ct.width() / this.itemWidth );
        this.$ct.width(this.itemWidth*this.colNum);
        if(this.arrColHeight.length === 0 || !$nodes){
            this.arrColHeight = [];
            for(var i=0; i<this.colNum; i++){
                this.arrColHeight[i] = 0;
            }   
        }

        if($nodes){
            //console.log(this.arrColHeight.length)
            $nodes.each(function(){
                var $item = $(this);
                $item.find('img').on('load', function(){
                    me.placeItem( $item );
                    me.$ct.height( Math.max.apply(null, me.arrColHeight) );
                })
            }); 
        }else{
            this.$items.each(function(){
                var $item = $(this);
                me.placeItem( $item );
            });
            
            me.$ct.height( Math.max.apply(null, me.arrColHeight) ); 
        }
        
    },

    placeItem: function( $el ) {
        // 1. 鎵惧埌arrColHeight鐨勬渶灏忓€硷紝寰楀埌鏄鍑犲垪
        // 2. 鍏冪礌left鐨勫€兼槸 鍒楁暟*瀹藉害
        // 3. 鍏冪礌top鐨勫€兼槸 鏈€灏忓€�
        // 4. 鏀剧疆鍏冪礌鐨勪綅缃紝鎶奱rrColHeight瀵瑰簲鐨勫垪鏁扮殑鍊煎姞涓婂綋鍓嶅厓绱犵殑楂樺害
        var obj = this.getIndexOfMin(this.arrColHeight),
            idx = obj.idx,
            min = obj.min;
        $el.css({
            left: idx * this.itemWidth,
            top: min
        });
        this.arrColHeight[idx] += $el.outerHeight(true);
    },

    getIndexOfMin: function( arr ){
        var min = arr[0],
            idx = 0;
        for(var i = 1; i< arr.length; i++){
            if(min > arr[i]){
                min = arr[i];
                idx = i;
            }
        }
        return {min: min, idx: idx};
    }
}

实例链接：
http://js.jirengu.com/kodep/1/edit?html