砌体图像不喜欢 <div>答案

【问题标题】：Masonry Images don't like the <div>砌体图像不喜欢 <div>
【发布时间】：2018-01-19 03:05:27
【问题描述】：

所以我正在尝试使用 Masonry 创建一个照片库。它们可能都有不同的尺寸，所以我选择使用 % 尺寸来代替让事情变得更干净一些。现在我想在照片上添加信息，并使内容可过滤。

<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 来附加所有图像，但它也不起作用:(

【问题讨论】：

标签： c# css asp.net-mvc jquery-masonry masonry

【解决方案1】：

头

<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>`

一个朋友去帮助我，我们使用以下解决方案让它工作。如果这对其他人有帮助

【讨论】：