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>

我的理解是图像必须首先加载，然后才能触发砌体脚本。

砖石图像不垂直堆叠

2 个答案: