砌体图像不垂直堆叠

Question

我正在尝试使用随机图像实现砌体，但它没有垂直堆叠。第二行图像没有堆叠。我按照说明操作，但不清楚。我添加了图像、javascript 和样式表。

这是我的application.js

//= require jquery
//= require bootstrap-sprockets
//= require masonry/masonry
//= require masonry/jquery.event-drag
//= require masonry/jquery.imagesloaded.min
//= require masonry/jquery.infinitescroll.min
//= require masonry/modernizr-transitions
//= require masonry/box-maker
//= require masonry/jquery.loremimages.min
//= require jquery_ujs
//= require turbolinks
//= require custom
//= require_tree .

application.css

 *= require_tree .
 *= require_self
 *= require font-awesome
 *= require masonry/basic
 *= require masonry/centered
 *= require masonry/fluid
 *= require masonry/gutters
 *= require masonry/infinitescroll
 *= require masonry/right-to-left
 *= require masonry/transitions
 */

HTML

<div id="masonry-container" class="transitions-enabled infinite-scroll clearfix">

      <div class="box">
        <img src="http://placehold.it/236x190">
      </div>
      <div class="box">
        <img src="http://placehold.it/236x177">
      </div>
      <div class="box">
        <img src="http://placehold.it/236x342">
      </div>
      <div class="box">
        <img src="http://placehold.it/236x156">
      </div>
      <div class="box">
        <img src="http://placehold.it/236x182">
      </div>
      <div class="box">
        <img src="http://placehold.it/236x341">
      </div>

      <div class="box col1">
        <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. </p>
      </div>

      <div class="box col2">
        <p>
          <a href="http://www.flickr.com/photos/nemoorange/3319714470/" title="Whitlow's on Wilson by nemoorange, on Flickr"><img src="http://farm4.static.flickr.com/3008/3319714470_c05a5cb5a8_m.jpg" alt="Whitlow's on Wilson" /></a>
        </p>
      </div>
    </div>

Answer 1

你在初始化 Masonary 脚本吗？这是在 JavaScript 区域进行初始化的示例：

https://jsfiddle.net/4zngmzzd/

我使用了普通的 JavaScript 初始化，但也有一个 jQuery 版本：

//Plain JavaScript
var elem = document.getElementById('masonry-container');
var msnry = new Masonry(elem, {
  itemSelector: '.box'
});

Masonary 主页包含有关初始化的更多信息：http://masonry.desandro.com/

您是初始化了脚本还是其他原因？

(jQuery 版本: https://jsfiddle.net/0a73a1qd/)

Answer 2

<script>
$(window).load(function() {
  $('#masonry-container').masonry({
    // options
    itemSelector: '.box'
  });
});
</script>

我的理解是必须先加载图像，然后启动砌体脚本。

砌体图像不垂直堆叠

masonry images not stacking vertically

html

javascript

css

ruby-on-rails-4

masonry