Bootstrap + 砌体不正确的堆叠图像

Question

您好，在此先感谢您的帮助。这是一个 link 到有问题的网站：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  
  });

知道我做错了什么吗？

Answer 1

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

Bootstrap + 砌体不正确的堆叠图像

Bootstrap + Masonry Incorrect Stacked Images

javascript

css

shared-hosting

masonry

bootstrap-4