Bootstrap + Masonry 不正确的堆叠图像答案

【问题标题】：Bootstrap + Masonry Incorrect Stacked ImagesBootstrap + Masonry 不正确的堆叠图像
【发布时间】：2018-11-04 18:36:16
【问题描述】：

您好，提前感谢您的帮助。这是相关网站的链接：caulfield.co/test/originals.html

我正在尝试使用 Masonry 在 Bootstrap 4 构建的站点上创建一个画廊。在本地服务器上加载时，砌体显示为所需，见图：

但是在将网站上传到共享主机帐户时，图像显示不正确。 See the first link here.

我的html、css和js是对Masonry原代码的轻微定制：

HTML：

<section id="available">
                <h1>Originals</h1>
                <div class="line-separator-sm"></div>
                <div class="grid">
                    <div class="grid-sizer"></div>
                    <div class="grid-item two-to-one">
                        <img src="images/available/1.jpg" width="100%" height="auto"/>
                    </div>
                    <div class="grid-item three-to-two">
                        <img src="images/available/2.jpg" width="100%" height="auto"/>
                    </div>
                    <div class="grid-item one-to-one">
                        <img src="images/available/3.jpg" width="100%" height="auto"/>
                    </div>
                    <div class="grid-item four-to-five">
                        <img src="images/available/4.jpg" width="100%" height="auto"/>
                    </div>
                    <div class="grid-item three-to-two">
                        <img src="images/available/5.jpg" width="100%" height="auto"/>
                    </div>
                    <div class="grid-item one-to-two">
                        <img src="images/available/6.jpg" width="100%" height="auto"/>
                    </div>
                    <div class="grid-item one-to-one">
                        <img src="images/available/7.jpg" width="100%" height="auto"/>
                    </div>
                    <div class="grid-item three-to-two">
                        <img src="images/available/8.jpg" width="100%" height="auto"/>
                    </div>
                    <div class="grid-item five-to-eight">
                        <img src="images/available/9.jpg" width="100%" height="auto"/>
                    </div>
                    <div class="grid-item one-to-one">
                        <img src="images/available/10.jpg" width="100%" height="auto"/>
                    </div>
                    <div class="grid-item two-to-three">
                        <img src="images/available/11.jpg" width="100%" height="auto"/>
                    </div>
                    <div class="grid-item three-to-two">
                        <img src="images/available/12.jpg" width="100%" height="auto"/>
                    </div>
                    <div class="grid-item one-to-one">
                        <img src="images/available/13.jpg" width="100%" height="auto"/>
                    </div>
                    <div class="grid-item two-to-one">
                        <img src="images/available/14.jpg" width="100%" height="auto"/>
                    </div>
                    <div class="grid-item three-to-two">
                        <img src="images/available/15.jpg" width="100%" height="auto"/>
                    </div>
                </div>
            </section>

CSS：

/* ---- grid ---- */

.grid {
  max-width: 1200px;
  margin: 0 auto;
  box-shadow:0px 0px 2px #888;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-sizer,
.grid-item {
  width:20px;
}

.grid-item {
  margin:5px;
}

.one-to-one   { width: 150px; height: 150px; }
.one-to-two   { width: 150px; height: 300px; }
.two-to-one   { width: 300px; height: 150px; }
.two-to-three { width: 150px; height: 225px; }
.three-to-two { width: 225px; height: 150px; }
.three-to-five{ width: 150px; height: 250px; }
.five-to-three{ width: 250px; height: 150px; }
.four-to-five { width: 150px; height: 187.5px; }
.five-to-four { width: 187.5px; height: 150px; }
.five-to-eight{ width: 150px; height: 240px; }
.eight-to-five{ width: 240px; height: 150px; }

JS：

$('.grid').masonry({
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
    horizontalOrder: true,
    fitWidth: true  
  });

任何想法我做错了什么？

【问题讨论】：

您在该链接处收到多个 404 错误
谢谢@ksav - 你说得对。多么棒的学习经历。使用检查器，404 显示所有 js 链接都不正确。只需将路径从/js/.... 更改为js/....

标签： javascript css bootstrap-4 shared-hosting masonry

【解决方案1】：

答案很简单。感谢@ksav，我使用检查器发现了由不正确的<script> 路径引起的404 错误。它们被写成/js/... 并将它们更正为js/... 就可以了。谢谢！

【讨论】：