Question

我正在尝试实施响应式图像的砌体库。但是，图像都被拉伸了。我有这个小提琴：

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

根据需要点击“加载更多”按钮。除了图像被拉伸之外，它几乎可以很好地工作。如何以正确的分辨率获取图像？

Answer 1

基本问题是您设置了明确的宽度/高度，然后通过.image类在其上设置max-width。这意味着宽度将受到限制，但高度将不会相应地跟随，因为它是硬设置的。

您应该从img标记中删除尺寸（宽度/高度属性）。

这会产生一个问题，即砌体无法从一开始就计算宽度/高度，因此您需要在加载图像后调用.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>

Answer 2

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

从img标记中删除height属性。
在img标签中将高度除以2（height =“'+ randomHeight / 2 +'）

砌体画廊水平拉伸所有东西

2 个答案: