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 code：

            <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的内联块中。这样你就可以在不担心行的情况下进行重复：

CSS：

            <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 -->

HTML

    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';

角：

{{1}}

AngularJS Bootstrap Gallery横向和纵向图像

1 个答案: