相关疑难解决方法(0)

砌体图像彼此重叠

我正在为图片库进行砌体布局.但是砖石建筑大多数时候都会显示出相互重叠的图像.其余时间它的确定,有时一些图像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>
Run Code Online (Sandbox Code Playgroud)

附上代码:

<div class="images-grid">
  <div class="row" id="images_container">
    <%= render :partial => 'shared/images' %>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

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;
}
Run Code Online (Sandbox Code Playgroud)

JQuery的:

$(document).ready(function() {
    var …
Run Code Online (Sandbox Code Playgroud)

html css jquery ruby-on-rails jquery-masonry

12
推荐指数
1
解决办法
2万
查看次数

当克服ajax加载更多按钮时,没有重新加载砌体物品

大家好,我有一个关于砌体项目的问题.

我从codepen.io创建了这个DEMO

在这个演示中你可以看到有这个javascript代码:

$(window).load(function()
{
$( function() {
var $container = $('.posts-holder');
    $container.masonry({
      isFitWidth: true,
      itemSelector: '.kesif-gonderi-alani'
    });

});
});
Run Code Online (Sandbox Code Playgroud)

打开页面时,我只显示10个帖子.如果用户想要显示其他10个帖子,则用户需要单击(显示更多按钮).我创建了这个ajax函数来显示更多帖子.

$('.showmore').live("click",function(event) 
{
event.preventDefault();
var ID = $(this).attr("id");
var P_ID = $(this).attr("rel");
var URL=$.base_url+'diger_fotograflar_ajax.php';
var dataString = "lastid="+ ID+"&profile_id="+P_ID;

if(ID)
{
$.ajax({
type: "POST",
url: URL,
data: dataString, 
cache: false,
beforeSend: function(){ $("#more"+ID).html('<img src="wall_icons/ajaxloader.gif" />'); },
success: function(html){
$("div.posts-holder").append(html).each(function(){
   $('.posts-holder').masonry('reloadItems');
 });
$("#more"+ID).remove();
}
});
}
else
{
$("#more").html('The End');// no results

}

return false;
});
Run Code Online (Sandbox Code Playgroud)

此代码在单击showmore按钮$('.posts-holder').masonry('reloadItems'); …

javascript css ajax jquery masonry

3
推荐指数
1
解决办法
8010
查看次数

标签 统计

css ×2

jquery ×2

ajax ×1

html ×1

javascript ×1

jquery-masonry ×1

masonry ×1

ruby-on-rails ×1