砌体画廊不工作

Question

我正在通过 GitHub 托管一个网站，我刚刚添加了一个新页面，用于展示一些图形设计作品。该页面由一个 header 然后是一个包含我的一些作品的砖石画廊组成。图像的大小各不相同，大多数为 1920x1080 和 800x800。在记事本中创建我的画廊时，一旦我将它发送到 GitHub，一切看起来都很好，图像被放大到它们的实际大小。我能做什么？谢谢

图片：http://imgur.com/a/RH4y9

图库：https://kuebikoyt.github.io/portfolio.html

Answer 1

您将在浏览器控制台中获得 Uncaught TypeError: a.indexOf is not a function。我已经看过几次了，那是因为你使用 $.load() 不当。 $.load() 曾经是 $.on('load') 的 shortcut/alias，但现在不是了。所以改用 $(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>

砌体画廊不工作

Masonry gallery not working

html

css

gallery

masonry