单独渲染出来像瀑布流这样的效果

最新推荐文章于 2022-08-21 16:15:57 发布

大爱无疆强

最新推荐文章于 2022-08-21 16:15:57 发布

阅读量1k

点赞数

分类专栏： AngularJs

AngularJs 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

用一个自定义命令去包已有的实现方法，然后在容器上放入自定义命令即可。仅供参考：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<title>AngularJS</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>

</head>
<body>

  <div ys-waterfall width="400" height="300" func="scroll">
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
  </div>


<script type="text/javascript" charset="utf-8">
angular.module('Demo', [], angular.noop).directive('ysWaterfall', function($timeout){

  var controller = function($scope, $element){
    var line = 0;

    $scope.scroll = function(callback){
      line += 1;
      var content = '<p>%s: 内容内容</p>'.replace('%s', line);
      callback(content);
    }
  }

  var link = function($scope, $element, $attrs, $ctrl){
    var last = 0;
    var bind = $scope[$attrs['func']];

    var when_scroll = function(){
      $element.off('scroll');
      $timeout(function(){
        var top = $element.scrollTop();
        if(top > last){
          last = top;
          $scope[$attrs['func']](function(content){
            $element.html($element.html() + content);
          });
        }

        $element.on('scroll', when_scroll);
      }, 500);
    }

    $element.on('scroll', when_scroll);
  }

  var compile = function($element, $attrs, transclude){
    var width = parseInt($attrs['width'], 10);
    var height = parseInt($attrs['height'], 10);

    $element.css({
      width: width,
      height: height,
      overflowY: 'scroll',
      backgroundColor: 'gray'
    });

    return link;
  }

  return {compile: compile,
          scope: true,
          controller: controller};
});

angular.bootstrap(document, ['Demo']);
</script>
</body>
</html>

大爱无疆强

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
单独渲染出来像瀑布流这样的效果

用一个自定义命令去包已有的实现方法，然后在容器上放入自定义命令即可。仅供参考：AngularJS 内容内容内容内容内容内容内容内容 angular.module('Demo', [], angular.noop).directive('ysWaterfall', functi
复制链接

扫一扫

专栏目录