我正在为图片库进行砌体布局.但是砖石建筑大多数时候都会显示出相互重叠的图像.其余时间它的确定,有时一些图像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) 大家好,我有一个关于砌体项目的问题.
我从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'); …