jQuery砌体示例不适合我
[英]jQuery masonry example not working for me
问题描述
基于jQuery砌体 ，我得到以下内容：
jQuery的：
$('#container').masonry({
itemSelector : '.item',
columnWidth: 240
});
jQuery ajax :( jquery-masonry在页面加载后第一次success发生。如果success再次发生而没有页面重新加载，则jquery-masonry不起作用。）
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;
}
结果：
预期：
当它看起来像div的这些 interms水平和垂直相互对立时。
题：
我究竟做错了什么？
2 个解决方案
解决方案1
2 已采纳 2012-11-21 17:09:00
添加更多元素后，需要使用.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/
解决方案2
0 2012-11-21 16:05:39
我怀疑你的jquery.masonry.min.js没有正确加载。 检查firebug或chrome开发人员工具上的网络选项卡。
这是我的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在同一目录级别的一个名为masonry-master的目录中加载jquery.masonry.min.js
为什么在此示例中砌体不起作用？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.