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

你有没有试过这个真棒carousel。您可以更改透视图以将图像作为网格。

Answer 2

能够通过使用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>

如何在AngularJS中创建图像轮播的角度网格

2 个答案: