0
我想實現響應圖像磚石畫廊。然而，圖像都被拉伸。我有這樣的小提琴：砌體畫廊拉伸所有東西水平
https://jsfiddle.net/4h855fu3/
$(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>點擊 「加載更多」 按鈕，每當需要。除了圖像被拉伸之外，它幾乎效果很好。如何以正確的分辨率獲取圖像？
由於某種原因，該佈局功能在我之前不適用，我想我錯了。 – ohyeah
@ ohyeah它不會自行工作。它在這個版本中起作用，因爲我們已經從'img'標籤中刪除了'width'和'height'屬性。 –
我也刪除了寬度和高度標籤。我之前將它們包括在內，以便與不同的框架一起使用，但不再需要它們。一切都按照預期工作，謝謝你的幫助！ – ohyeah