Javascript 自举&x2B；不正确的堆叠图像

您好，提前谢谢您的帮助。以下是有关网站的链接：

我正在尝试使用在Bootstrap4构建的站点上创建一个库。在本地服务器上加载时，将根据需要显示砖石结构，请参见图：

但是当将网站上传到共享主机帐户时，图像显示不正确

我的

html

、

css

和

js

是对砌体原始代码的轻微定制：

HTML:

JS:

---

知道我做错了什么吗？

答案很简单。感谢@ksav，我使用inspector发现了由不正确的

路径引起的404错误。它们被写成

/js/..

，并将它们改成

js/..

就成功了。谢谢大家!

您在该链接上遇到多个404错误谢谢@ksav-您完全正确。多好的学习经历啊。使用inspector，404显示所有js链接都不正确。只需将路径从

/js/…

更改为

js/…

<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>

/* ---- 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; }

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