AngularJS Bootstrap Gallery 横向和纵​​向图像

Question

我已经用 AngularJS、bootstrap 和 Wordpress 构建了一个网站。

图库应该能够在一行中并排显示两张纵向图像，并在一行中显示横向图像。我偶然发现这篇文章http://codepen.io/horne3754sg/pen/vNBdgB 有人在图像数组中找到对并建立一个网格，但他没有使用 Bootstrap。

我希望画廊在某个断点处进入堆栈模式，但在本示例中并非如此。我面临的另一个问题是，在上面的示例中，他使用预定义的图像数组，我使用异步请求来检索我的图像，所以我无法在我的图像数组中找到对。到目前为止，这是我的代码：

AngularJS：

    return $http.get('wp-json/wp/v2/projects/?status=publish&slug=' + url).success(function(res) {
        WPService.project = res;

        // We retrieve all sizes for each image in the project
        let project_attached_images_length = WPService.project[0].attached_images.length;

        for(let i=0; i< project_attached_images_length; i++) {
            $http.get('wp-json/wp/v2/media/' + WPService.project[0].attached_images[i].ID).success(function(res) {
                WPService.project_images[i] = res;

                let image = new Image();
                image.src = WPService.project_images[i].source_url;
                WPService.project_images[i].width  = image.width;
                WPService.project_images[i].height = image.height;

                if(WPService.project_images[i].width <= WPService.project_images[i].height)
                    WPService.project_images[i].orientation = 'portrait';
                else
                    WPService.project_images[i].orientation = 'landscape';

                //console.log(i + ' ' + WPService.project_images[i].source_url + ' ' + WPService.project_images[i].dimension);
                //console.log(WPService.project_images[i]);
            });
        }
    });
}

HTML 代码：

            <div ng-repeat="project in data.project">
              <div class="row" ng-repeat="image in project.attached_images track by $index" ng-hide="$index == 0">
                <div ng-class="{ 'col-md-1': !isToggled, 'col-md-0': isToggled }"></div>
                <div ng-class="{ 'col-md-10': !isToggled, 'col-md-12': isToggled }">
                  <div class="project-image afkl-lazy-wrapper afkl-img-ratio-1-1" afkl-lazy-image="{{ data.project_images[$index].media_details.sizes.medium.source_url }} 640w, {{ data.project_images[$index].media_details.sizes.large.source_url }} 768w, {{ image.guid }}"></div>
                  <p class="project-photos-excerpt">{{ image.post_excerpt }} - {{ data.project_images[$index].orientation }}</p>
                </div><!-- .col-md-10 -->
                <div ng-class="{ 'col-md-1': !isToggled, 'col-md-0': isToggled }"></div>
              </div><!-- .row -->
            </div><!-- ng-repeat wrapper -->

也许有人找到了另一种解决方案，例如 Masonary？ （我刚遇到这个）

如何在网格中并排显示肖像图像？数组也没有固定的顺序。

Answer 1

我最终得到了以下解决方案。我没有为每个图像打印单独的 Bootstrap 行/列，而是制作了一个带有 UL 表的容器，将 IMG 放在 LI 的内联块中。这样您就可以 ng-repeat 而不必担心行：

CSS：

#project-photos {
    list-style: none;
    display:table;
    padding:0;
    width:100%;
}
#project-photos li {
    display:inline-block;
    vertical-align: top;
}
#project-photos li.portrait {
    width:50%;
    padding:0 1% 1% 1%;
}
#project-photos li.landscape {
    width:100%;
    padding:0 1% 1% 1%;
}
.project-image img {
    display:block;
  max-width:100%;
    width:100%;
    height:auto
}

HTML

            <div class="row" ng-repeat="project in data.project">
              <div ng-class="{ 'col-md-1': !isToggled, 'col-md-0': isToggled }"></div>
              <div ng-class="{ 'col-md-10': !isToggled, 'col-md-12': isToggled }">
                <ul id="project-photos">
                  <li ng-repeat="image in project.attached_images track by $index" class="{{ data.project_images[$index].class }}" ng-if="$index != 0">
                    <div class="project-image" afkl-lazy-image="{{ data.project_images[$index].media_details.sizes.medium.source_url }} 640w, {{ data.project_images[$index].media_details.sizes.large.source_url }} 768w, {{ image.guid }}"></div>
                    <p class="project-photos-excerpt" ng-if="image.post_excerpt">{{ image.post_excerpt }}</p>
                  </li>
                </ul>
              </div><!-- .col-md-10 -->
              <div ng-class="{ 'col-md-1': !isToggled, 'col-md-0': isToggled }"></div>
            </div><!-- .row -->

角度：

    return $http.get('wp-json/wp/v2/projects/?slug=' + url).success(function(res) {
        WPService.project = res;

        // We retrieve all sizes for each image in the project
        let project_attached_images_length = WPService.project[0].attached_images.length;

        for(let i=0; i< project_attached_images_length; i++) {
            $http.get('wp-json/wp/v2/media/' + WPService.project[0].attached_images[i].ID).success(function(res) {
                WPService.project_images[i] = res;

                if(WPService.project_images[i].media_details.width < WPService.project_images[i].media_details.height)
                    WPService.project_images[i].class = 'portrait';
                else
                    WPService.project_images[i].class = 'landscape';