我正在实现jQuery Masonry插件,但是对于宽度超过一列的元素,即所有Masonry元素的
宽度不相同的问题,我遇到了困难。 有谁能帮助我解决这个问题吗?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js/masonry.min.js" type="text/javascript"></script>
</head>
<style>
.item0,.item1,.item2,.item3,.item4,.item5,.item6,.item7,.item8{float:left; margin: 10px;
background:#999;}
.item1,.item0 {
width:300px;
}
.item2 {
width:200px;
}
.item3,.item8 {
width:100px;
}
.item4,.item5,.item6,.item7{
width:100px;
}
#container{
float:left; width:1000px;
}
</style>
<script type="text/javascript">
$(function(){
$('#container').masonry(
{});
});
</script>
<body>
<div id="container">
<div class="item0">1 tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf</div>
<div class="item0">2 sdf sdf sdf sdf d dsfdsfds sf sdf sdfsdf </div>
<div class="item1">3 sdfsdfsdf sdf sdfsdf sdf sdfs ddsf dsf sd sdf </div>
<div class="item2">4 tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf</div>
<div class="item3">5 sdf sdf sdf sdf d dsfdsfds sf sdf sdfsdf </div>
<div class="item4">6 sdfsdfsdf sdf sdfsdf sdf sdfs ddsf dsf sd sdf </div>
<div class="item5">7 tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf</div>
<div class="item6">sdf sdf sdf sdf d dsfdsfds sf sdf sdfsdf </div>
<div class="item7">sdfsdfsdf sdf sdfsdf sdf sdfs ddsf dsf sd sdf </div>
<div class="item8">tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf</div>
<div class="item7">sdfsdfsdf sdf sdfsdf sdf sdfs ddsf dsf sd sdf </div>
<div class="item8">tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf</div>
</div>
</body>
</html>