如何从同位素砌体中去除顶部/底部边缘答案

【问题标题】：How to remove top / bottom margin from isotope masonry如何从同位素砌体中去除顶部/底部边缘
【发布时间】：2015-10-15 06:12:04
【问题描述】：

我正在使用同位素砌体画廊，但发现很难去除行之间的顶部/底部间隙（见图）

我该怎么办？

我使用的代码基于以下内容： http://simbyone.com/animated-masonry-gallery-with-filters/

如前所述，我直接使用来自上述 url 的代码，包括 javascript 和 css。图片的 html 是使用 php 创建的，但输出如下：

    <div id="gallery-content">
    <div id="gallery-content-center">
                        <div class='wrapper suggestion all film any later' id='3'>
                            <span class='relevance'>
                                <span class='badge'>87%</span>

                            </span>
                                <img src='cabinet/item/img/3.jpg' class='all film any later' alt='Film 1'/>
                            <span class='text'><i class='fa fa-check-circle-o btn-icon up'></i> <i class='fa fa-times-circle-o btn-icon down'></i> <i class='fa fa-heart-o btn-icon fav'></i><br>Film 1 later</span>
                        </div></div></div>

我还在图像上使用悬停文本：

        .wrapper img {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);  /* For Webkit browsers */
        filter: gray;  /* For IE 6 - 9 */
        -webkit-transition: all .6s ease;  /* Transition for Webkit browsers */
    }

    .wrapper img:hover {
        filter: grayscale(0%);
        -webkit-filter: grayscale(0%);
        filter: none;
    }

    .wrapper .text {
        position:relative;
        bottom:65px;
        left:10px;
        width: 150px;
        overflow: visible;
        visibility:hidden;
        color: #fff;
        font-size: 20px;
    }

    .wrapper:hover .text {
        visibility:visible;
    }

    .wrapper .relevance {
        position:relative;
        top:30px;
        left:250px;
        visibility:hidden;
        color: #a9a9a9;
        z-index: 99999;
    }

    .wrapper:hover .relevance {
        visibility:visible;
    }

    .wrapper .relevance .badge {
        font-size: 16px;
        background-color: #333;
    }

编辑：似乎如果我对 .wrapper 应用一个高度，它会处理它，但由于图像的高度会发生变化，我似乎无法将它紧紧地包裹在其中的图像上。任何建议我可以如何做到这一点作为高度：自动让我留下我已经拥有的东西

【问题讨论】：

您必须提供您编写的代码，以便其他人为您提供解决方案

标签： jquery css jquery-isotope jquery-masonry

【解决方案1】：

我找到了一个解决方法，虽然我不是 100% 如果这是要走的路，但我添加了 margin-bottom: -25% 到所有图像，它似乎已经成功了。可能不适合所有情况，但时间会证明一切

#gallery-content-center img {
  width: 100%;
  height: auto;
  margin-bottom: -25%;
}

【讨论】：

如果不包括您的同位素代码和链接或 jsfiddle，没有人能说这是否是您看到此问题的原因。

【解决方案2】：

你可能需要使用imagesloaded插件，所以masonry可以先知道加载图像的高度，然后调整位置。

见https://masonry.desandro.com/layout.html#imagesloaded

【讨论】：