Question

您好，在此先感谢您的帮助。以下是指向相关网站的链接：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 +石工堆积的图片不正确

1 个答案: