所以我正在尝试使用 Masonry 创建一个照片库。它们可能都有不同的尺寸，所以我使用 % sizing 来代替让事情变得更干净一些。现在我想在照片上添加信息，并使内容可过滤。
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/Isotope/isotope.pkgd.min.js"></script>
<script src="~/Scripts/Isotope/masonry.pkgd.min.js"></script>
<script src="~/Scripts/Isotope/imagesloaded.pkgd.min.js"></script>
<script src="~/Scripts/Isotope/jquery.min.js"></script>
<script>
$('.Gallery').masonry();
</script>
<style>
img {
max-width: 33%;
}
</style>
</head>
<body>
<div>
<p></p>
<div class="Gallery">
@foreach (var pic in Model)
{
<div class="photo-container">
<a href='@Url.Action("Details", "PhotoManagement", new { id =
pic.Id })'><img src="@pic.FilePath" typeof="image"
oncontextmenu="return false" /></a>
</div>
<script>
var $Gallery = $('.Gallery').isotope({
// options...
});
$Gallery.imagesLoaded().progress(function () {
$Gallery.isotope('layout'); });
</script>
}
</div>
</div>
</body>
Photo of the result 你们有任何提示，我将不胜感激!此外，任何批评或任何你建议我做的改进也会很好。我正在练习使用 C#，只是想了解更多有关它的所有信息，但像这样的东西令人沮丧，无法理解我哪里出错了。
旁注:我也尝试过使用 append 来附加所有图像，但它也没有用 :(
最佳答案
头
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/Isotope/jquery.min.js"></script>
<script src="~/Scripts/Isotope/isotope.pkgd.min.js"></script>
<script src="~/Scripts/Isotope/masonry.pkgd.min.js"></script>
<script src="~/Scripts/Isotope/imagesloaded.pkgd.min.js"></script>
<style>
.photo-container{
width: 320px;
margin: 5px;
float: left;
}
.photo-container img {
width: 100%;
display: block;
}
</style>
正文 `
<div>
<p></p>
<div class="Gallery">
@foreach (var pic in Model)
{
<div class="photo-container">
<a href='@Url.Action("Details", "PhotoManagement", new { id =
pic.Id })'>
<img src="@pic.FilePath" typeof="image"
oncontextmenu="return false" />
</a>
</div>
}
<script>
$(document).ready(function () {
var $grid = $('.Gallery').isotope({
itemSelector: ".photo-container",
masonry: {
columnWidth: 33
}
});
$grid.imagesLoaded().progress(function () {
$grid.isotope('layout');
})
})
</script>
</div>
</div>`
一个伙伴去帮助我，我们用下面的解决方案让它工作。如果这对其他人有帮助
关于c# - masonry 图像不喜欢 <div>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48333531/