我已经成功测试了多列的 masonry.js,但在我的应用程序中,我需要使用 .ajax()
JSON 数据动态添加砌体项目。目前,我选择使用 .append()
来布局初始砌体 .items - 问题是所有砌体项目都在单个列中输出。容器大小的更改没有帮助,即使将容器宽度增加到足够多,它也不会设置为 3 列。即使使用containerWidth函数并使用returncontainerWidth/3
代码如下:
jQuery(document).ready(function()
{
$.ajax(
{
url: 'http://localhost/project/index.php/controller/function',
dataType:'json',
success: function(data)
{
// limit - used to limit the json data ouput, as the json data contains an array of 50 objects.
var limit = 11;
$.each(data.results, function(index,item)
{
if (index > limit) return false;
// A bunch of var assignments mainly for data_*
$("#content").append('<div class="item ' + index + '"><a href="'
+ data_link + '">'
+ data_title + '</a><p>'
+ data_desc + '</p><img style="height:100; width:100;" src="'
+ data_img + '"><p>'
+ data_date + 'Source: '
+ data_source + '</p></div>');
});
}
});
$('#content').masonry({
itemSelector: '.item',
isAnimated: !Modernizr.csstransitions,
columnWidth: 350
}).imagesLoaded(function() {
$('#content').masonry('reload');
});
});
以下是 View 中的 HTML:
<header> // FYI I am using CodeIgniter & Twitter Bootstrap
</header>
<div class="container" style="padding-top:145px; width:1300px; margin-left:auto; margin-right:auto;">
<div id="content" class="container-mason clearfix">
</div>
</div>
</div>
以下是我在 masonry.js 中使用的样式 - 将 styl.css 中的 container
更改为 container-mason
以避免任何样式可能与 Bootstrap 发生冲突
#container-mason {
background: #FFF;
padding: 5px;
margin-bottom: 20px;
border-radius: 5px;
clear: both;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
<style >
#content
{
margin: 0 auto;
width: auto;
}
.item {
height: 300px;
width: 300px;
border: 2px #0099cc solid;
margin-bottom:10px;
left: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
-moz-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
-ms-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
-o-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
transition: left .4s ease-in-out, top .4s ease-in-out .4s;
}
</style>
感谢您的帮助!!
更新
这是 JsFiddle http://jsfiddle.net/8CjT6/5/
最佳答案
我认为您错过了 items 类的 float: left
样式。
检查这个fiddle .
关于JQuery masonry.js 与 Json 数据 .append( ) 的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14180172/