Question

我是JS的新手。我想要展示这种展示照片的效果：kristianhammerstad.com

我已经在使用砖石，请参阅代码：http://codepen.io/Kiks/pen/YWzNjr 图像宽度相同但高度不同。这是唯一的规则。

问题显示在视频模拟中：jmp.sh/mMcu1Bb - 图像高度不同时，网格会断开，图像会相互叠加。但是当我有相同高度的链接图像时，网格就可以了。

有趣的是，您在视频中看到的问题只出现在我的网站上（Chrome，Safari）但它在Codepen中运行良好（首次加载后，即使我调整浏览器窗口，也一直都可以）。你能解释一下吗？ Codepen在那里有什么特别之处？

这正是我的代码。你能告诉我我失踪的地方和地点吗？我刚刚学习，请耐心等待。谢谢

/* Masonry magic */

.container { width: 96% !important; margin: 0 auto; }

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

#masonry { margin: 0 auto; width: 100%; position: relative; /*z-index:2001;*/ }

.item {
    width: 460px; height: auto; background: invisible;    
    margin: 0 auto 20px auto;
    /*float: left;*/
}

.card-text {
    width: 460px;
    padding-right: 40px;
}

/* End of Masonry magic */

body { padding-top: 60px; }

.clearfix:before,
.clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ }
.clearfix:after { clear: both; }

.lead {
    font-weight: 400;
    font-size: 24px;
    line-height: 1.6;
    color: #444444;
    margin-bottom: 40px;
}

.text {
    text-align: left;
    font-size: 18px;
    line-height: 1.7;
    color: #444444; 
}

p {
    margin-bottom: 20px;
}

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Image Showcase Bootstrap</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Own styles -->
    <link href="css/style.css" rel="stylesheet">

  </head>

  <body>
    <div class="container">

<!--     <div id="masonry">
        <div class="item"><img src="http://placehold.it/460x500"></div>
        <div class="item"><img src="http://placehold.it/460x500"></div>
        <div class="item"><img src="http://placehold.it/460x500"></div>
        <div class="item"><img src="http://placehold.it/460x500"></div>
        <div class="item"><img src="http://placehold.it/460x500"></div>
        <div class="item"><img src="http://placehold.it/460x500"></div>
        <div class="item"><img src="http://placehold.it/460x500"></div>
        <div class="item"><img src="http://placehold.it/460x500"></div>
    </div> -->

    <div id="masonry">
        <div class="item"><img src="http://placehold.it/460x500"></div>
        <div class="item"><img src="http://placehold.it/460x800"></div>
        <div class="item"><img src="http://placehold.it/460x600"></div>
        <div class="item"><img src="http://placehold.it/460x460"></div>
        <div class="item"><img src="http://placehold.it/460x300"></div>
        <div class="item"><img src="http://placehold.it/460x400"></div>
        <div class="item"><img src="http://placehold.it/460x200"></div>
        <div class="item"><img src="http://placehold.it/460x500"></div>
    </div>

    </div><!-- /.container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery.min.js"><\/script>')</script>
    <script src="js/bootstrap.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.0/masonry.pkgd.min.js"></script>
    <script>
      var container = document.querySelector('#masonry');
      var msnry = new Masonry( container, {
        columnWidth: 460,
        gutter: 20,
        isFitWidth: true,
        itemSelector: '.item'
      });
    </script>

  </body>
</html>

Answer 1

我找到了！另外还有一个支架。现在，我没有加载整个窗口，只是带有图像的div。我希望它真的没问题，但最后看起来我的代码工作正常。

工作代码：http://codepen.io/Kiks/pen/oLNBrG

$('#masonry').imagesLoaded(function() {
            $('#masonry').masonry({
                itemSelector : '.item',
                columnWidth : 460,
                isAnimated: true,
                gutter: 20,
                isFitWidth: true,
                animationOptions: {
                    duration: 700,
                    easing: 'linear',
                    queue: false
                }
            });
        });

虽然，仍然存在一个小问题。看看如何在创建正确的网格之前只看到一列：http://jmp.sh/5wqeF4Q（我正在刷新页面两次）

任何想法如何立即获得漂亮的网格？

砌体：图像重叠在彼此之上

1 个答案: