图片/ div在加载

Question

我已经使用Zurb的基础框架构建了一个3x3网格，并且在加载时有时这些框架相互重叠。正常加载的图像数量和不加载的图像数量是完全随机的。有时它只是一个图像，有时是所有图像，等等。当您从http：//而不是本地查看网站时，它也会更频繁地发生。请看下面的图片。

这些框是响应式的，当浏览器的宽度减小到1200px时，它们的大小会减小。因此，每个盒子的静态高度不是一个选择。它们保持相同的比例（4：3）。

如何让它们彼此不重叠？

我认为问题是浏览器渲染框的速度比渲染每张图像的速度快 - 因此不考虑高度。

此部分的代码如下所示

<div class="row">
    <div class="large-12 large-centered columns">
        <div id="grid" class="row">

            <figure class="small-6 medium-4 columns item" data-groups='["all", "app"]'>
                <img src="images/portfolio/nos/sp-item.jpg" alt="img01"/>
                <figcaption>
                    <h2><span>NOS</span></h2>
                    <p>5 maanden werken aan een nieuwe NOS app</p>
                    <a href="portfolio/nos-casestudy.html"  title="bekijk dit project"></a>
                </figcaption>           
            </figure>

            <!-- 8 more figures like the one above, each is one box -->

        </div>
    </div>
</div>

Answer 1

我认为这是Foundation块网格的经典案例。只需将类从大3改为大块网格。

所以你的代码看起来像这样：

<div class="row">
  <div class="large-block-grid-12 large-centered columns">
    <div id="grid" class="row">

        <figure class="small-block-grid-6 medium-block-grid-4 columns item" data-groups='["all", "app"]'>
            <img src="images/portfolio/nos/sp-item.jpg" alt="img01"/>
            <figcaption>
                <h2><span>NOS</span></h2>
                <p>5 maanden werken aan een nieuwe NOS app</p>
                <a href="portfolio/nos-casestudy.html"  title="bekijk dit project"></a>
            </figcaption>           
        </figure>

        <!-- 8 more figures like the one above, each is one box -->

    </div>
</div>

您可以详细了解Foundation block grid here

Answer 2

我添加了.imageLoaded() jQuery plugin并对其进行了配置，以便只有在#grid中加载所有图片时才会加载shuffle.js;我用来改组/过滤项目的插件。

现在，无论是重新加载还是clear-cache-full-reload，它都可以正常显示。

问题在于，如果插件在所有/任何图像加载之前被触发，它只会给它一个10px的高度。现在，通过在加载所有图像后触发插件，它们将以完整高度显示。

奇怪的是，在我将网格改为块网格之前我应用了这个建议，正如@Asaf David所建议的那样，它没有用。现在确实如此。

++ @Asaf David致信建议块网格，虽然我既不能确认也不否认这有帮助。但至少它改进了我的代码，imho。