高度导致 ng Infinite Scroll 中的 div 标签出现问题答案

【问题标题】：Height causes issue in div tag in ng Infinite Scroll高度导致 ng Infinite Scroll 中的 div 标签出现问题
【发布时间】：2015-02-05 19:24:29
【问题描述】：

我正在使用 NIS 进行无休止的滚动，我实现了它，它工作正常，除了一个问题。就像我使用 float: left 来维护 div 标签一样。但是在使用float 后，它一次发送多个请求，但是当我删除float:left 时，它发送我想要的单个请求。

我一次从服务器获得 20 个结果

我没有在 JsFiddle 或 Plunker 上提供示例的公共 URL。

这是我的代码

<!DOCTYPE html>
<html>

  <head>
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script src="js/angular/lib/angular.min.js"></script>
    <script src="js/angular/lib/ng-infinite-scroll.min.js"></script>
    <script src="js/angular/customjs/endless_scroll.js"></script>
    <style type="text/css">
    .test{
      float:left;
    }
    </style>
  </head>

  <body ng-app="myApp">
    <div ng-controller='DemoController'>
      <div id="scroll" infinite-scroll='reddit.nextPage();' 
      infinite-scroll-container="'scroll'"
      infinite-scroll-disabled='reddit.stopscript'   
      infinite-scroll-distance='2'>             

      <div ng-repeat='item in reddit.items'>
           <div class="test">
           <div style="height:30px;width:200px; border-style:solid;border-width:medium;">{{item.bookmark_id}}</div>
          <div style="height:100px;width:200px; border-style:solid;border-width:medium;">{{item.bookmark_title}}</div>
      </div>
      </div>
    </div>
    <div ng-show='reddit.busy'>Loading data...</div>
    </div>
  </body>
</html>

这是我的控制器

var myApp = angular.module('myApp', ['infinite-scroll']);

myApp.controller('DemoController', function ($scope, Reddit) {
  $scope.reddit = new Reddit();
});

myApp.factory('Reddit', function ($http) {
  var Reddit = function () {
   this.items = [];
   this.busy = false;
   this.stopscript = false;
  };

Reddit.prototype.nextPage = function () {

  if (this.busy){
   return;
  }
 else{
    this.busy = true;

 var url = "http://example.com/get_recent_articles/";   
  $http.get(url).success(function (data) {
    if (data.recently_added.bookmarks.length == 0) {

        this.stopscript = true;
    }
    else {               
        this.items.push.apply(this.items, data.recently_added.bookmarks);             
     }
     this.busy = false;
    }.bind(this));
   }
 }; 
 return Reddit;
});

谁能帮我解决这个问题？

谢谢。

【问题讨论】：

尝试使用display:inline-block 而不是float:left
@VitorinoFernandes 当我使用display:inline-block 时，所有Div 标签都会垂直显示

标签： jquery css angularjs nginfinitescroll

【解决方案1】：

当你浮动元素时，父元素会折叠。我假设你的 ng-show 元素是触发加载的元素，所以你总是希望它位于内容下方（这样当你滚动到它时，它会触发内容加载）。这意味着您需要在父级上使用 clearfix，以便它随着浮动内容展开，而不是折叠。

#images::after {
  display: block;
  clear: both;
  content: " ";
  width: 0;
  height: 0;
}

您可以在此处了解有关浮动工作原理的更多信息：http://css-tricks.com/all-about-floats/

【讨论】：

你能解决我的疑问吗，把这个图像属性放在哪里？因为到目前为止我没有使用上面的images ID。
@abarik 试试#scroll。 #images 只是一个例子；就像我的帖子描述的那样，您需要将其应用于浮动元素的父级。
我知道了@Christian 感谢您的回复