如何在AngularJS中创建图像传送带的角网格

Question

我使用了两个插件来实现这一点，但它的工作并不完美。这两个插件是angulargrid和光滑的旋转木马。有谁知道一个插件可以同时实现这两种功能吗？

下面是我使用这两个插件时的情况，它几乎足够好，只不过旋转木马会导致网格项之间的空白，直到页面第一次加载后调整窗口的大小。有人能不打嗝就让它正常工作吗？

<ul class="dynamic-grid" angular-grid="vm.stories" ag-grid-width="400" ag-gutter-size="20" ag-id="gallery">
     <li data-ng-repeat="story in vm.stories" class="grid">

         <!--Carousel-->
         <slick fade="true" dots="true" ng-style="vm.imageStyle" ng-show="story.images.length > 0" ng-class="{'showImages': story.images.length > 0}">
             <div ng-repeat="image in story.images">
                 <img class="carousel-image" data-lazy="{{ image.filename }}"  aria-label="Image" ng-style="vm.imageStyle">
             </div>
         </slick>
     </li>
 </ul>

Answer 1

通过使用div就能让它工作起来。这是我所拥有的，它也使用无限滚动。

<div ng-cloak="" layout="column" layout-fill>
<md-content id="content-scroller">
    <div>
    <div
         class="cards-wrap"
         angular-grid="vm.stories"
         ag-grid-width="400"
         ag-gutter-size="20"
         ag-id="gallery"
         ag-scroll-container="'#content-scroller'"
         ag-infinite-scroll="vm.loadMoreStories()"
         performantScroll="true">
      <div class="card" ng-repeat="story in vm.stories">
          <slick fade="true" dots="true">
              <div ng-repeat="image in story.images">
                  <img data-lazy="{{ image.filename}}"  aria-label="Image">
              </div>
          </slick>
          <div class="inside">
              <h3>{{story.title}}</h3>
              <div class="description">{{ story.text }}</div>
          </div>
      </div>
    </div>
    <div class="loading-more-indicator" ng-show="vm.loadingMore">
      <md-progress-circular md-mode="indeterminate" md-diameter="64" class="progress-swatch"></md-progress-circular>
    </div>
        </div>
</md-content>
<div>

Answer 2

你试过这个很棒的旋转木马吗？您可以更改透视图，使图像成为网格。