我正在通过 GitHub 托管一个网站，我刚刚添加了一个新页面，用于展示一些图形设计作品。该页面由一个标题和一个包含我的一些作品的砖石画廊组成。图像的大小各不相同，大多数为 1920x1080 和 800x800。在记事本中创建我的画廊时，一旦我将它发送到 GitHub，一切看起来都很好，图像被放大到它们的实际大小。我能做些什么？谢谢。
最佳答案
您在浏览器控制台中收到 Uncaught TypeError: a.indexOf is not a function。我已经看过几次了，这是因为您使用 $.load() 不当。 $.load() 曾经是 $.on('load') 的快捷方式/别名，但现在不是了。所以使用 $(window).on('load', functionname) 代替。您还应该将 $.on('resize') 用于您的其他事件，尽管现在没有必要……;)
$(function() {
function scaleGallery() {
// This is roughly the max pixels width/height of a square photo
var widthSetting = 400;
// Do not edit any of this unless you know what you're doing
var containerWidth = $(".gallery").width();
var ratioSumMax = containerWidth / widthSetting;
var imgs = $(".gallery img");
var numPhotos = imgs.length, ratioSum, ratio, photo, row, rowPadding, i = 0;
while (i < numPhotos) {
ratioSum = rowPadding = 0;
row = new Array();
while (i < numPhotos && ratioSum < ratioSumMax) {
photo = $(imgs[i]);
// reset width to original
photo.width("");
ratio = photo.width() / photo.height();
rowPadding += getHorizontalPadding(photo);
// if this is going to be first in the row, clear: left
if (ratioSum == 0) photo.css("clear", "left");
else photo.css("clear", "none");
ratioSum += ratio;
row.push(photo);
i++;
// if only 1 image left, squeeze it in
if (i == numPhotos - 1) ratioSumMax = 999;
}
unitWidth = (containerWidth - rowPadding) / ratioSum;
row.forEach(function(elem) {
elem.width(unitWidth * elem.width() / elem.height());
});
}
}
function getHorizontalPadding(elem) {
var padding = 0;
var left = elem.css("padding-left");
var right = elem.css("padding-right");
padding += parseInt(left ? left.replace("px", "") : 0);
padding += parseInt(right ? right.replace("px", "") : 0);
return padding;
}
$(window).on('load',scaleGallery);
$(window).on('resize',scaleGallery);
});<base href="https://kuebikoyt.github.io/portfolio.html">
<!DOCTYPE html>
<html >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<title>Responsive Photo Gallery</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="portfolio.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand navbar-brand-centered" href="index.html">Kuebiko</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="#">Social</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#"></a></li>
</ul>
</div>
</div>
</nav>
<div class="bgimg-1"><div class="text"><h1> <b>PORTFOLIO</b> </h1></div></div>
<div class="gallery">
<img src="RetroAvatar.png">
<img src="RetroTwitter.png">
<img src="englewood.png">
<img src="FloralLogo.png">
<img src="FloralBanner.png">
<img src="KuebikoLogoNewNew.png">
<img src="KuebikoNewNewNewBanner.png">
<img src="Kollorfull.png">
<img src="KuebikoLogo.png">
<img src="ios11.png">
<img src="OtherNewKuebikoBanner.png"> <img src="OtherNewKuebikoLogo.png"> <img src="SolarPanels.png"> <img src="KuebikoWallpaper.png"> <img src="KuebikoBannerNew.png"> <img src="top5tweaks.png"> <img src="PaintBanner.png"> <img src="Monochrome.png"> <img src="Wallpaper4.png"> <img src="Wallpaper2nd.png"> <img src="YoutubeLogo.png"> <img src="lol.png"> <img src="YoutubeBanner.png"> <img src="Wallpaper3.png"> <img src="Wallpaper1.png"> </div>
</body>
</html>关于html - masonry 画廊不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44338170/