美文网首页
发布订阅模式

发布订阅模式

作者: jrg陈咪咪sunny | 来源:发表于2018-09-27 22:14 被阅读0次

    发布+ 订阅= 观察者模式,组件之间的接藕。(常见重要)

    var WaterFall = (function(){
      var $ct;
      var $items;
    
      function render($c){
        $ct = $c;
        $items = $ct.children();
    
        var nodeWidth = $items.outerWidth(true),
          colNum = parseInt($(window).width()/nodeWidth),
          colSumHeight = [];
    
        for(var i = 0; i<colNum;i++){
          colSumHeight.push(0);
        }
    
        $items.each(function(){
          var $cur = $(this);
    
          //colSumHeight = [100, 250, 80, 200]
    
          var idx = 0,
            minSumHeight = colSumHeight[0];
    
          for(var i=0;i<colSumHeight.length; i++){
            if(colSumHeight[i] < minSumHeight){
              idx = i;
              minSumHeight = colSumHeight[i];
            }
          }
    
          $cur.css({
            left: nodeWidth*idx,
            top: minSumHeight
          });
          colSumHeight[idx] = $cur.outerHeight(true) + colSumHeight[idx];
        });
      }
    
    
      $(window).on('resize', function(){
        render($ct);
      })
    
    
      return {
        init: render
      }
    })();
    
    module.exports = WaterFall
    

    相关文章

      网友评论

          本文标题:发布订阅模式

          本文链接:https://www.haomeiwen.com/subject/fxiyoftx.html