砌体图像相互重叠

Posted 2023-05-09

【中文标题】砌体图像相互重叠

【英文标题】：Masonry images overlapping above each other

【发布时间】：2013-07-15 20:30:45

【问题描述】：

我正在为图片库设计砖石布局。但砌体大部分时间显示的图像相互重叠。其余时间还可以，有时一些图像 div 会溢出到其封闭 div 下方的 div 上。

如何包含这些图像而不是防止重叠。我认为 imagesLoaded 方法已被弃用。

好的，这是我的代码：

部分中的图像示例。会有很多

<div class="container span3" >
        <div class="image">
            <div class="content">
                <a href="/issues/<%= image.id %>"></a>
                <%= image_tag(image.photo.url(:medium)) %>
            </div>
        </div>
        <div class="title">
            <h2><a href="/images/<%= image.id %>"><%= truncate(image.title, :length => 20, :omission => '...') %></a></h2>
        </div>
    </div>

封闭代码：

<div class="images-grid">
  <div class="row" id="images_container">
    <%= render :partial => 'shared/images' %>
  </div>
</div>

CSS：

.images-grid .container .image 
    overflow:hidden;
    position:relative;


.images-grid .container .image img 
    height:auto;
    width:100%;


.images-grid .container 
    display:inline-block;
    background-color:#fff;
    margin-bottom:30px;
    padding-bottom:10px;
    position:relative;

JQuery:

$(document).ready(function() 
    var $container = $('#images_container');
    // initialize
    $container.masonry(
      columnWidth: 150,
      itemSelector: '.property',
      isAnimated: true,
      isFitWidth: true
    );
);

【参考方案1】：

第一次使用imagesLoaded：

// with jQuery
var $container = $('#container');

// initialize Masonry after all images have loaded  
$container.imagesLoaded( function() 
     $container.masonry();
);

然后，如果可以，请在图像标签上指定图像宽度/高度属性

<img src="...."   />

imagesLoaded 未被弃用：

http://masonry.desandro.com/layout.html#imagesloaded

【讨论】：

我得到了这个：Object [object Object] has no method 'imagesLoaded'WHen id use imagesLoaded。

抱歉没有包含 imagesloaded.js。谢谢，但现在三栏变成了两栏。生病尝试摆弄css。你有什么解决办法吗？

嗨..可以检查一下吗？ ***.com/questions/17698922/…

尽管使用了 imagesLoaded，但我一直在为同样的问题苦苦挣扎，然后意识到我嵌入的 Google 字体是在图像之后加载的，因此会导致 Masonry 关闭。不错的解决方案：***.com/questions/16783015/….

这帮助我解决了这个问题，它发生在平板电脑上。但是诀窍是在砌体中添加“布局”，如下所示： $container.masonry('layout');