Masonry Gallery 水平拉伸一切

Question

我正在尝试实现响应式图像的砌体画廊。但是，图像都被拉伸了。我有这个 fiddle：

$(document).ready(function() {
  $('#container').masonry({
    "itemSelector": ".item",
    "columnWidth": ".grid-sizer",
  });
});

$('#loadMore').click(function() {
  $(this).hide();
  for (var i = 0; i < 5; i++) {
    var randomWidth = Math.round((Math.random() * (4) + 5) * 100);
    var randomHeight = Math.round((Math.random() * (4) + 5) * 100);
    var element = $('<div class="item"><img src="https://placehold.it/' + randomWidth + 'x' + randomHeight + '" class="image" width="' + randomWidth + '" height="' + randomHeight + '"><a class="overlay" href="#"><h3 class="title">Some title</h3><div class="description">' + '<p>Lorem ipsum dolor sit amet, <br>consectetur adipisicing elit.</p></div></a></div>');

    $('#container').append(element).masonry('appended', element, true);;
  }

  $('#container').imagesLoaded().progress(function() {
    $('#loadMore').show();
  });
});

html {
  overflow-y: scroll;
}
body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}
.item {
  float: left;
  position: relative;
  line-height: 1em;
}
.grid-sizer {
  width: 20%;
}
.item {
  width: 20%;
}
@media screen and (max-width: 1224px) {
  /* 10 columns for larger screens */
  .grid-sizer {
    width: 33.33%;
  }
  .item {
    width: 33.33%;
  }
}
@media screen and (max-width: 720px) {
  /* 10 columns for larger screens */
  .grid-sizer {
    width: 50%;
  }
  .item {
    width: 50%;
  }
}
@media screen and (max-width: 480px) {
  /* 10 columns for larger screens */
  .grid-sizer {
    width: 100%;
  }
  .item {
    width: 100%;
  }
}
.image {
  max-width: 100%;
  margin: 0;
  display: block;
}
.image:after {
  clear: both;
}
.overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  text-decoration: none;
  color: #fff;
  display: none;
}
.overlay .title {
  text-align: center;
  font-size: 30px;
}
.overlay .description {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.80);
  width: 100%;
  margin: 0;
}
.overlay .description p {
  margin: 20px;
}
.item:hover .overlay {
  display: block;
}
#loadMore {
  position: fixed;
  top: 0px;
  left: 0px;
}
#bodycontent {
  width: 90%;
  margin: 0 auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.0.0/masonry.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.0/imagesloaded.pkgd.min.js"></script>


<div id="bodycontent">
  <div id="container">
    <div class="grid-sizer"></div>
  </div>
</div>

<button id="loadMore" type="button">Load more</button>

点击 "Load more" 按钮的次数不限。它几乎可以很好地工作，除了被拉伸的图像。如何获得正确分辨率的图像？

Answer 1

图像宽度由 jquery 控制并基于浏览器宽度。但是高度不是。两种方法。

从 img 标签中删除高度属性。
在 img 标签中将高度除以 2 (height="' + randomHeight/2 + ')

Answer 2

基本问题是您设置了显式 width/height，然后通过 .image class，设置了 max-width。这意味着宽度将被限制，但高度不会相应地跟随，因为它是硬设置的。

您应该从 img 标签中删除维度（width/height 属性）。

这会造成砌体无法从一开始就计算 width/height 的问题，因此您需要在加载图像后调用 .masonry('layout')（ 在您现有的 imagesLoaded处理程序)

$(document).ready(function() {
  $('#container').masonry({
    "itemSelector": ".item",
    "columnWidth": ".grid-sizer",
  });
});

$('#loadMore').click(function() {
  $(this).hide();
  for (var i = 0; i < 5; i++) {
    var randomWidth = Math.round((Math.random() * (4) + 5) * 100);
    var randomHeight = Math.round((Math.random() * (4) + 5) * 100);
    var element = $('<div class="item"><img src="https://placehold.it/' + randomWidth + 'x' + randomHeight + '" class="image"><a class="overlay" href="#"><h3 class="title">Some title</h3><div class="description">' + '<p>Lorem ipsum dolor sit amet, <br>consectetur adipisicing elit.</p></div></a></div>');

    $('#container').append(element).masonry('appended', element, true);;
  }

  $('#container').imagesLoaded().progress(function() {
    $('#loadMore').show();
    $('#container').masonry('layout');
  });
});

html {
  overflow-y: scroll;
}
body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}
.item {
  float: left;
  position: relative;
  line-height: 1em;
}
.grid-sizer {
  width: 20%;
}
.item {
  width: 20%;
}
@media screen and (max-width: 1224px) {
  /* 10 columns for larger screens */
  .grid-sizer {
    width: 33.33%;
  }
  .item {
    width: 33.33%;
  }
}
@media screen and (max-width: 720px) {
  /* 10 columns for larger screens */
  .grid-sizer {
    width: 50%;
  }
  .item {
    width: 50%;
  }
}
@media screen and (max-width: 480px) {
  /* 10 columns for larger screens */
  .grid-sizer {
    width: 100%;
  }
  .item {
    width: 100%;
  }
}
.image {
  max-width: 100%;
  margin: 0;
  display: block;
}
.image:after {
  clear: both;
}
.overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  text-decoration: none;
  color: #fff;
  display: none;
}
.overlay .title {
  text-align: center;
  font-size: 30px;
}
.overlay .description {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.80);
  width: 100%;
  margin: 0;
}
.overlay .description p {
  margin: 20px;
}
.item:hover .overlay {
  display: block;
}
#loadMore {
  position: fixed;
  top: 0px;
  left: 0px;
}
#bodycontent {
  width: 90%;
  margin: 0 auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.0.0/masonry.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.0/imagesloaded.pkgd.min.js"></script>


<div id="bodycontent">
  <div id="container">
    <div class="grid-sizer"></div>
  </div>
</div>

<button id="loadMore" type="button">Load more</button>

Masonry Gallery 水平拉伸一切

Masonry Gallery stretching everything horizontally

jquery

masonry