jQuery的砌體例如基於<a href="http://masonry.desandro.com/" rel="nofollow noreferrer">jQuery masonry</a>我

不工作，我有以下幾點：jQuery的砌體例如基於<a href="http://masonry.desandro.com/" rel="nofollow noreferrer">jQuery masonry</a>我

的jQuery：

$('#container').masonry({ 
    itemSelector : '.item', 
     columnWidth: 240 
});

jQuery的AJAX：（jQuery的砌體工程第一次success發生jquery-masonry不起作用如果success再次發生沒有頁面重新加載。）

success: function(widget_shell) 
{ 

    if(widget_shell.d[0]) { 

     $("#container").empty(); 

     var i = 0; 

     // creating the div elements 
     for (i = 0; i <= widget_shell.d.length - 1; i++) { 

      var j = Math.floor(Math.random() * 200) + 50 

      var $widget = $("<div class='item col1' style='height:" + j + "px'></div>").appendTo($("#container")); 
      $("<span>" + widget_shell.d[i].widget_id + " - " + j + "</span>").appendTo($widget); 

     } 

     // initialising the jquery masonry plugin 
     $('#container').masonry({ 
      itemSelector : '.item', 
      columnWidth: 240 
     }); 

    } 

}

success: function(widget_shell) 
{ 

    if(widget_shell.d[0]) { 

     $("#container").empty(); 

     var i = 0; 

     // creating the div elements 
     for (i = 0; i <= widget_shell.d.length - 1; i++) { 

      var j = Math.floor(Math.random() * 200) + 50 

      var $widget = $("<div class='item col1' style='height:" + j + "px'></div>").appendTo($("#container")); 
      $("<span>" + widget_shell.d[i].widget_id + " - " + j + "</span>").appendTo($widget); 

     } 

     // initialising the jquery masonry plugin 
     $('#container').masonry({ 
      itemSelector : '.item', 
      columnWidth: 240 
     }); 

    } 

}

HTML：（通過jQuery-AJAX動態創建）

<div id="container" style="position: relative; height: 0px;" class="masonry"> 
    <div class="item col1" style="height:154px"><span>39 - 154</span></div> 
    <div class="item col1" style="height:100px"><span>52 - 100</span></div> 
    <div class="item col1" style="height:229px"><span>53 - 229</span></div> 
    <div class="item col1" style="height:126px"><span>55 - 126</span></div> 
    <div class="item col1" style="height:245px"><span>56 - 245</span></div> 
    <div class="item col1" style="height:242px"><span>57 - 242</span></div> 
    <div class="item col1" style="height:146px"><span>58 - 146</span></div> 
    <div class="item col1" style="height:63px"><span>59 - 63</span></div> 
    <div class="item col1" style="height:118px"><span>60 - 118</span></div> 
    <div class="item col1" style="height:249px"><span>61 - 249</span></div> 
    <div class="item col1" style="height:136px"><span>62 - 136</span></div> 
    <div class="item col1" style="height:114px"><span>63 - 114</span></div> 
    <div class="item col1" style="height:152px"><span>64 - 152</span></div> 
    <div class="item col1" style="height:52px"><span>65 - 52</span></div> 
    <div class="item col1" style="height:95px"><span>66 - 95</span></div> 
</div>

CSS：

.item { 
    width: 220px; 
    margin: 10px; 
    float: left; 
    background:white; 
}

結果：

enter image description here

預計：

當它應該看起來像this interms的div水平和垂直方向對彼此的，向上的。

問：

我在做什麼錯？

來源

2012-11-21 oshirowanen

爲什麼你'高度：0px'在'#container的div'？ –

[Works for me]（http://jsfiddle.net/RNA8R/）。 –

@CalvinCheng，我沒有補充說，它會自動生成。 – oshirowanen

您需要在追加更多元素後使用.masonry('reload')函數。例如，這可能工作：

success: function(widget_shell) 
{ 

    if(widget_shell.d[0]) { 

     $("#container").empty(); 

     var i = 0; 

     // creating the div elements 
     for (i = 0; i <= widget_shell.d.length - 1; i++) { 

      var j = Math.floor(Math.random() * 200) + 50 

      var $widget = $("<div class='item col1' style='height:" + j + "px'></div>").appendTo($("#container")); 
      $("<span>" + widget_shell.d[i].widget_id + " - " + j + "</span>").appendTo($widget); 

     } 

     // reload jquery masonry plugin 
     $('#container').masonry('reload') 

    } 

}

否則，請檢查的jsfiddle：http://jsfiddle.net/RNA8R/1/

來源

2012-11-21 17:09:00

我懷疑你的jquery.masonry.min.js沒有正確加載。檢查你的螢火蟲或你的鉻開發工具的網絡標籤。

這裏是我確切的代碼在我index.html文件（沒有什麼是對我的DOM渲染;在我的html文件，我實際的代碼）： -

<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
     <script src="./masonry-master/jquery.masonry.min.js"></script> 
     <script> 
      $(function(){ 
       $('#container').masonry({ 
       // options 
       itemSelector : '.item' 
       }); 
      }); 
     </script> 
     <style> 
      body { 
       background: #999; 
      } 

      .item { 
       width: 220px; 
       margin: 10px; 
       float: left; 
       background:white; 
      } 
     </style> 
    </head> 
    <body> 
    <div id="container"> 
     <div class="item" style="height:154px"><span>39 - 154</span></div> 
     <div class="item" style="height:100px"><span>52 - 100</span></div> 
     <div class="item" style="height:229px"><span>53 - 229</span></div> 
     <div class="item" style="height:126px"><span>55 - 126</span></div> 
     <div class="item" style="height:245px"><span>56 - 245</span></div> 
     <div class="item" style="height:242px"><span>57 - 242</span></div> 
     <div class="item" style="height:146px"><span>58 - 146</span></div> 
     <div class="item" style="height:63px"><span>59 - 63</span></div> 
     <div class="item" style="height:118px"><span>60 - 118</span></div> 
     <div class="item" style="height:249px"><span>61 - 249</span></div> 
     <div class="item" style="height:136px"><span>62 - 136</span></div> 
     <div class="item" style="height:114px"><span>63 - 114</span></div> 
     <div class="item" style="height:152px"><span>64 - 152</span></div> 
     <div class="item" style="height:52px"><span>65 - 52</span></div> 
     <div class="item" style="height:95px"><span>66 - 95</span></div> 
    </div> 


    </body> 
</html>

目錄結構： -

我index.html負載高達jquery.masonry.min.js在目錄masonry-master在相同的目錄級別

來源

2012-11-21 16:05:39

看起來它和我在初始化jquery.masonry插件時有關係。請在評論中查看'Christian Varga'指出的粗體'jQuery ajax'中原始問題標題中顯示的新代碼。 – oshirowanen

jQuery的砌體例如基於<a href="http://masonry.desandro.com/" rel="nofollow noreferrer">jQuery masonry</a>我

回答

相關問題