<?php /* @author:luowen @time:2013-08-12 @desc:jquery实现瀑布流布局,自适应屏幕宽 [HTML Code] <!doctype html> <html> <head> <meta charset='utf-8'> <title></title> <link rel="stylesheet" type="text/css" href="wf.css"> <script type="text/javascript" src="../Jquery.js"></script> <script type="text/javascript" src='wf.js'></script> </head> <body > <div class="container"> <div class="wrap"> <div class="box"> <img src="1.jpg" /> <a href="">gril1</a> </div> <div class="box"> <img src="2.jpg" /> <a href="">gril1</a> </div> <div class="box"> <img src="3.jpg" /> <a href="">gril1</a> </div> <div class="box"> <img src="4.jpg" /> <a href="">gril1</a> </div> <div class="box"> <img src="5.jpg" /> <a href="">gril1</a> </div> <div class="box"> <img src="6.jpg" /> <a href="">gril1</a> </div> <div class="box"> <img src="7.jpg" /> <a href="">gril1</a> </div> <div class="box"> <img src="8.jpg" /> <a href="">gril1</a> </div> <div class="box"> <img src="9.jpg" /> <a href="">gril1</a> </div> <div class="box"> <img src="10.jpg" /> <a href="">gril1</a> </div> <div class="box"> <img src="5.jpg" /> <a href="">gril1</a> </div> <div class="box"> <img src="9.jpg" /> <a href="">gril1</a> </div> <div class="box"> <img src="10.jpg" /> <a href="">gril1</a> </div> <div class="box"> <img src="5.jpg" /> <a href="">gril1</a> </div> </div> </div> </body> </html> [CSS Code] *{ margin: 0; padding: 0; } .container{ margin: 0 auto; } .wrap{ margin: 0 auto; position: relative; } .box{ 238px; margin-left: 10px; padding:5px; border:1px solid #ccc; border-radius: 10px; box-shadow: 1px 1px 10px #000,-1px -1px 3px #ccc; position: absolute; left: 0; top: 0; } .box img{ 234px; display: block; border-radius: 3px; } .box a{ height: 30px; text-align: center; font:normal 15px '微软雅黑'; line-height: 20px; display: block; } [JS Code] $(function(){ //动态穿件一个数据存放数据 var arr = []; //两边留空白宽度 var space = 100; //盒子的宽度 var boxW = $('.box').eq(0).outerWidth(true); //文档宽度 var docW; //文档高度 var docH; function PBL(){ //盒子的个数 var boxCnt = $('.box').length; //文档宽度 docW = $(document).width(); //文档高度 docH = $(document).height(); //每排显示多少个 var viewCnt = Math.floor((docW-space*2)/boxW); for(var i = 0; i < viewCnt; i++){ arr[i] = 0; } //wrap 宽度 $('.container').width(boxW*viewCnt); for(var i = 0; i < boxCnt; i++){ //判断当前盒子在那个列 cols = i%viewCnt; //讲盒子放在那一列 switch(cols){ case 0: $('.box').eq(i).css({'left':0,'top':arr[0]}); arr[0] += $('.box').eq(i).outerHeight() + 10; break; case 1: $('.box').eq(i).css({'left':boxW,'top':arr[1]}); arr[1] += $('.box').eq(i).outerHeight() + 10; break; case 2: $('.box').eq(i).css({'left':2*boxW,'top':arr[2]}); arr[2] += $('.box').eq(i).outerHeight() + 10; break; case 3: $('.box').eq(i).css({'left':3*boxW,'top':arr[3]}); arr[3] += $('.box').eq(i).outerHeight() + 10; break; case 4: $('.box').eq(i).css({'left':4*boxW,'top':arr[4]}); arr[4] += $('.box').eq(i).outerHeight() + 10; break; case 5: $('.box').eq(i).css({'left':5*boxW,'top':arr[5]}); arr[5] += $('.box').eq(i).outerHeight() + 10; break; case 6: $('.box').eq(i).css({'left':6*boxW,'top':arr[6]}); arr[6] += $('.box').eq(i).outerHeight() + 10; break; case 7: $('.box').eq(i).css({'left':7*boxW,'top':arr[7]}); arr[7] += $('.box').eq(i).outerHeight() + 10; break; case 8: $('.box').eq(i).css({'left':8*boxW,'top':arr[8]}); arr[8] += $('.box').eq(i).outerHeight() + 10; break; case 9: $('.box').eq(i).css({'left':9*boxW,'top':arr[9]}); arr[9] += $('.box').eq(i).outerHeight() + 10; break; case 10: $('.box').eq(i).css({'left':10*boxW,'top':arr[10]}); arr[10] += $('.box').eq(i).outerHeight() + 10; break; case 11: $('.box').eq(i).css({'left':11*boxW,'top':arr[11]}); arr[11] += $('.box').eq(i).outerHeight() + 10; break; case 12: $('.box').eq(i).css({'left':12*boxW,'top':arr[12]}); arr[12] += $('.box').eq(i).outerHeight() + 10; break; case 13: $('.box').eq(i).css({'left':13*boxW,'top':arr[13]}); arr[13] += $('.box').eq(i).outerHeight() + 10; break; case 14: $('.box').eq(i).css({'left':14*boxW,'top':arr[14]}); arr[14] += $('.box').eq(i).outerHeight() + 10; break; } } } PBL(); $(window).resize(function(){ PBL(); }); $(window).scroll(function(){ //滚动的高度 var scrollH = $(window).scrollTop(); //三列中最小的 if(scrollH/docH >= 0.8){ $('.wrap').append("<div class='box'><img src='1.jpg'><a href=''>luowen</a></div>"); // console.log('xx') } }); }); 注:小BUG 1.屏幕显示最多显示14列,多了出现问题 switch(cols) case 部分 2.滚动条自动append还没做好..