JQuery masonry.js问题与Json数据.append（） [英] JQuery masonry.js issue with Json data .append( )

问题描述

我已经测试了masonry.js与多个列成功，但我的应用程序我需要动态使用 .ajax（） JSON数据添加masonry项目。目前我已经选择使用 .append（）来布局初始砖石.items - 问题是所有的砖石项目都在一列中输出。容器大小的改变没有帮助，即使增加容器宽度的量到足够多，它不会样式为3列。即使使用containerWidth函数并使用 return containerWidth / 3

I have tested masonry.js with multiple columns successfully but with my application I have the need to add masonry items dynamically using .ajax() JSON data. At the moment I have chosen to use .append() to layout the initial masonry .items - The issue is that all of the masonry items are being output in a single column. The container size changes didn't help, even when increasing the amount of container width to more than enough, it will not style to 3 columns. Even when using the containerWidth function and using return containerWidth / 3

strong>

Here is the code:

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');
        });
 });

视图中的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-mason 可能与引导冲突

Here are the styles I from masonry.js - changed container to container-mason in styl.css to avoid any possible conflict with 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>

感谢您的帮助！

UPDATE

这里是JsFiddle http://jsfiddle.net/8CjT6/5/

推荐答案

我认为你错过了项目类的 float：left 。

I think you have missed the style float: left for the items class.

此小提琴。

这篇关于JQuery masonry.js问题与Json数据.append（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！