美文网首页
发布订阅模式

发布订阅模式

作者: 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