Question

我正在尝试构建一个网格，其中包含用户提交的所有照片，并将它们放置在整齐的网格中，该网格将响应地响应浏览器的宽高比/分辨率。

Isotope看起来像是事实上的库。我已经通过我观看的每个演示实现了所有功能，并且我使用了两个静态大小的图像（纵向分辨率为346x533，横向分辨率为520x347）。由于图片大小相同或高度相同，这应该是一个不错的网格。问题是，它根本没有像我期望的那样呈现网格。有时我会得到返回的布局，其中有很大的空白，

    HTML:
           <div class="ga">
            <div class="row">
                <div class="gridsa">
                    <div class="gridsa-sizer"></div>
                    <div class="gridsa-item">
                        <img src="img/tile1.jpg" class="img-port"/>
                    </div>
                    <div class="gridsa-item">
                        <img src="img/tile7.jpg" class="img-land"/>
                    </div>
                    <div class="gridsa-item tile3">
                        <img src="img/tile3.jpg" class="img-land"/>
                    </div>
                    <div class="gridsa-item">
                        <img src="img/tile4.jpg" class="img-land"/>
                    </div>
                    <div class="gridsa-item">
                        <img src="img/tile7.jpg" class="img-land"/>
                    </div>
                    <div class="gridsa-item">
                        <img src="img/tile6.jpg" class="img-land"/>
                    </div>
                    <div class="gridsa-item">
                        <img src="img/tile8.jpg" class="img-land"/>
                    </div>
                </div>
            </div>
        </div>

    CSS
    * { box-sizing: border-box; }




    /* ---- isotope ---- */
    .gridsa {
     background: #ffcc33;
     margin: 0px auto;
    }

    /* clear fix */
    .gridsa:after {
    content: '';
    display: block;
    clear: both;
    }
    /* ---- .grid-item ---- */
    .gridsa-sizer,
    .gridsa-item {
       width: 33.333%;
     }

    .gridsa-item {
    padding:0px;
    float:left;
    }
   .gridsa-item img {
    display: block;
    max-width: 100%;
    position:relative;


}
.gridsa-item h2{
     color:#ffffff;
     position: absolute;
     bottom: 5%;
     left: 33.3%;
     width: 100%;
 }

.gridsa-item.tile2 h2{
    color:#ffffff;
    position: absolute;
    bottom: 1px;
    left: 25%;
    width: 50%;
}

.gridsa-item.tile3 h2{
    color:#ffffff;
    position: absolute;
    bottom: 1px;
    left: 0;
    width: 80%;
}



.ga{
    background-color: #0c5449;
}

    JS
                 <script type="text/javascript">
                    $( document ).ready(function() {
                    // init Isotope
                        var $grid = $('.gridsa').isotope({
                            itemSelector: '.gridsa-item',
                            percentPosition: true,
                            masonry: {
                                columnWidth: '.gridsa-sizer'
                            }
                        });
                        // layout Isotope after each image loads
                        $grid.imagesLoaded().progress( function() {
                            $grid.isotope('layout');
                        });
                    });
                </script>

这是问题的一个方面，但您需要最大化窗口并展开html部分才能看到问题。 https://jsfiddle.net/x6dhwh6k/2/

Answer 1

这是因为您的图片尺寸小于可用空间

实现愿望效果将width: 100%应用于您的img

像

.gridsa-item img {
  width: 100%;
  height: auto;
  max-width: 100%;
}

请参阅更新的小提琴https://jsfiddle.net/x6dhwh6k/3/

现在为了保持图像宽高比，您可能会看到图像下的差距很小但我想同位素插件没问题，因为它应该如何工作

使用同位素javascript插件，我怎样才能摆脱差距？

1 个答案: