uery相信各位都上过淘宝等之类的网站...参差不齐的网站布局是不是眼熟..比如这样的
像这种的一般我们的做法是
.item
{
width: 200px;
float: left;
padding: 15px 15px 0;
background-color: white;
bo rder: 1px solid #ccc ;
width: 200px;
float: left;
padding: 15px 15px 0;
background-color: white;
bo rder: 1px solid #ccc ;
}
html代码
1
<
div
id
="container"
>
2 < div class ="item" >
3 < 1 >< img src ="image/1.jpg" />< br />
4 hello!world!3条ADSL，无论是几M的，上传带宽是固定的，
5 </ div >
6 < div class ="item" >
7 < img src ="image/4.jpg" />< br />
8 < 5 > hello!world!是固定的，大约60~70K，3条乘3 </ div >
9 < div class ="item" >
10 < img src ="image/9.jpg" />< br />
11 < 6 > hello!world! </ div >
12 < div class ="item" >
13 < img src ="image/5.jpg" />< br />
14 < 7 > hello!world!hello!world!3条ADSL，无论是几M的，上传带宽是固定的，大约60~70K，3条乘3，就是大约180-210K，现在13个人，除以13，每个人是13.8~16.15K，现在因为机器上没有准确的流量监控，我再家的时候试过，只开QQ和一个酷狗或者酷我之类的在线音乐播放，大概就是20K左右上传。。。现在就属于咱们上传数据过大，结果开网页的时候请求数据包发不出去，就打不开网页。 </ div >
15 < div class ="item" >
16 < img src ="image/6.jpg" />< br />
17 < 8 > hello!world! </ div ></ div >
2 < div class ="item" >
3 < 1 >< img src ="image/1.jpg" />< br />
4 hello!world!3条ADSL，无论是几M的，上传带宽是固定的，
5 </ div >
6 < div class ="item" >
7 < img src ="image/4.jpg" />< br />
8 < 5 > hello!world!是固定的，大约60~70K，3条乘3 </ div >
9 < div class ="item" >
10 < img src ="image/9.jpg" />< br />
11 < 6 > hello!world! </ div >
12 < div class ="item" >
13 < img src ="image/5.jpg" />< br />
14 < 7 > hello!world!hello!world!3条ADSL，无论是几M的，上传带宽是固定的，大约60~70K，3条乘3，就是大约180-210K，现在13个人，除以13，每个人是13.8~16.15K，现在因为机器上没有准确的流量监控，我再家的时候试过，只开QQ和一个酷狗或者酷我之类的在线音乐播放，大概就是20K左右上传。。。现在就属于咱们上传数据过大，结果开网页的时候请求数据包发不出去，就打不开网页。 </ div >
15 < div class ="item" >
16 < img src ="image/6.jpg" />< br />
17 < 8 > hello!world! </ div ></ div >
这样做显然是不够的..因为他的布局不会这么错落有致...
这时候我们就要用到一个新的插件jquery.isotope.min.js或jquery.masonry.min.js 这两个js都会起到这种效果,当然这需要依附jq插件
把插件插入到我们的网页中 接下来只需要做一下操作就ok咯...
1 <script type="text/javascript">
2 $( function () {
3
4 var $container = $('#container');
5 /* 这个适用于有图片的操作 */
6 $container.imagesLoaded( function () {
7 $( this).isotope({
8 itemSelector: '.item'
9 });
10 });
11
12
13 /* 以下是点击div 此div删除 */
14 $container.delegate('.item', 'click', function () {
15 $container.isotope('remove', $( this)).isotope('reloadItems').isotope();
16 });
17
18 });
19
20 </script>
21
22 /* 一下是无图片的操作.单纯的文字需要别的方法 */
23 <script type="text/javascript">
24 $(document).ready( function () {
25 var $container = $('#container');
26 $container.isotope({
27 itemSelector: '.item'/
28 });
29 </script>
2 $( function () {
3
4 var $container = $('#container');
5 /* 这个适用于有图片的操作 */
6 $container.imagesLoaded( function () {
7 $( this).isotope({
8 itemSelector: '.item'
9 });
10 });
11
12
13 /* 以下是点击div 此div删除 */
14 $container.delegate('.item', 'click', function () {
15 $container.isotope('remove', $( this)).isotope('reloadItems').isotope();
16 });
17
18 });
19
20 </script>
21
22 /* 一下是无图片的操作.单纯的文字需要别的方法 */
23 <script type="text/javascript">
24 $(document).ready( function () {
25 var $container = $('#container');
26 $container.isotope({
27 itemSelector: '.item'/
28 });
29 </script>
1 <script type="text/javascript">
2 $( function () {
3
4 var $container = $('#container');
5 /* 这个适用于有图片的操作 */
6 $container.imagesLoaded( function () {
7 $( this).isotope({
8 itemSelector: '.item'
9 });
10 });
11
12
13 /* 以下是点击div 此div删除 */
14 $container.delegate('.item', 'click', function () {
15 $container.isotope('remove', $( this)).isotope('reloadItems').isotope();
16 });
17
18 });
19
20 </script>
21
22 /* 一下是无图片的操作.单纯的文字需要别的方法 */
23 <script type="text/javascript">
24 $(document).ready( function () {
25 var $container = $('#container');
26 $container.isotope({
27 itemSelector: '.item'/
28 });
29
2 $( function () {
3
4 var $container = $('#container');
5 /* 这个适用于有图片的操作 */
6 $container.imagesLoaded( function () {
7 $( this).isotope({
8 itemSelector: '.item'
9 });
10 });
11
12
13 /* 以下是点击div 此div删除 */
14 $container.delegate('.item', 'click', function () {
15 $container.isotope('remove', $( this)).isotope('reloadItems').isotope();
16 });
17
18 });
19
20 </script>
21
22 /* 一下是无图片的操作.单纯的文字需要别的方法 */
23 <script type="text/javascript">
24 $(document).ready( function () {
25 var $container = $('#container');
26 $container.isotope({
27 itemSelector: '.item'/
28 });
29
这就完成我想要的效果了..很好的一点是ie6也完全兼容...
具体代码++插件+示例下载 /Files/dugou/isotope-site.zip /Files/dugou/masonry-site.zip