这样参差不齐的多栏布局，叫&方砖石布局&，和&瀑布流布局&，很多网站都有使用这样的布局，比如：、、
这里，我们仅使用瀑布流插件实现当页内容的排列。&
那这插件到底有什么用呢？请看看下面的图片：右图是左图使用了插件之后的效果。
引用插件实例：
&style type="text/css"&
img { border:none; }
.wrapper { width:<span style="color: #px; margin:0 auto; }
.wrapper h3{color:#3366cc;font-size:16px;height:35px;line-height:<span style="color: #;text-align:center;border-bottom:1px solid #E5E5E5;margin:<span style="color: # 10px 0;}
#con1_1 { position:relative; }
#con1_1 .product_list { position:absolute; left:0px; top:0px; padding:10px; background:#eee; margin:5px;}
.product_list img { width:<span style="color: #px;}
.product_list p { padding:5px 0px; font-size:12px; text-align:center; color:#333;
white-space:normal; width:<span style="color: #px;}
&div class="wrapper"&
&h3&瀑布流实例&/h3&
&div id="con1_1"&
&div class="product_list"& &a href="#"&&img src="images/img6.jpg"&&/a&&p&【乖怪蜜桃.搭搭配】~貂绒嫁到~今年好流行的材质呢~跟风购入~颜色质感都好喜欢de 说呢~重点还很保暖&/p&&/div&
&div class="product_list"& &a href="#"&&img src="images/img4.jpg"&&/a&&p&夏天花裤子是一定要有的哦！&/p& &/div&
&div class="product_list"& &a href="#"&&img src="images/img1.jpg"&&/a&&p&薄荷绿的西裤子 怎么穿怎么好看&/p&&/div&
&div class="product_list"& &a href="#"&&img src="images/img2.jpg"&&/a&&p&超长款的雪纺开衫，很仙很气场呢，敞开穿比较大气，扣起来系个腰带，很淑女哈&/p&&/div&
&div class="product_list"& &a href="#"&&img src="images/img3.jpg"&&/a&&p&二零一二，十月。去年夏季最喜欢的雏菊小衬衫+牛仔长裙 还有最爱的复古手工包&/p&&/div&
&div class="product_list"& &a href="#"&&img src="images/img5.jpg"&&/a&&p&还有4年就奔3了，现在就拼命地装嫩吧，不然真到30大几岁还这副模样真真是恶心透了 啊哈哈~~ 装嫩必备蛋糕裙！&/p&&/div&
&div class="product_list"& &a href="#"&&img src="images/img8.jpg"&&/a&&p&依旧牛仔上衣和室内照。不要以为主角是衣服，其实是鞋子。&/p&&/div&
&div class="product_list"& &a href="#"&&img src="images/img7.jpg"&&/a&&p&很简单的大学生而已&/p&&/div&
&script type="text/javascript" src="js/jquery.js"&&/script&
&script type="text/javascript" src="js/jquery.masonry.min.js"&&/script&
&script type="text/javascript"&
$(document).ready(function(){
var $container = $('#con1_1');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.product_list',
columnWidth: 5 //每两列之间的间隙为5像素
如果不想使用插件，也可以把上面的js部分换为：
&script type="text/javascript" src="js/jquery.js"&&/script&
&script type="text/javascript"&
原理：1.把所有的li的高度值放到数组里面
2.第一行的top都为0
3.计算高度值最小的值是哪个li
4.把接下来的li放到那个li的下面
var margin = 10;//设置间距
var li=$(".product_list");//区块名称
li_W = li[0].offsetWidth+//取区块的实际宽度
function liuxiaofan(){
var h=[];//记录区块高度的数组
var n = 960/li_W|0;
for(var i = 0;i & li.i++) {
li_H = li[i].offsetH//获取每个li的高度
if(i & n) {//n是一行最多的li，所以小于n就是第一行了
max_H =Math.max.apply(null,h);
h[i]=li_H;//把每个li放到数组里面
li.eq(i).css("top",0);//第一行的Li的top值为0
li.eq(i).css("left",i * li_W);//第i个li的左坐标就是i*li的宽度
min_H =Math.min.apply(null,h) ;//取得数组中的最小值，区块中高度值最小的那个
minKey = getarraykey(h, min_H);//最小的值对应的指针
h[minKey] += li_H+//加上新高度后更新高度值
li.eq(i).css("top",min_H+margin);//先得到高度最小的Li，然后把接下来的li放到它的下面
li.eq(i).css("left",minKey * li_W);
//第i个li的左坐标就是i*li的宽度
$("p").eq(i).text("高度："+li_H);//把区块高度值写入对应的区块H2标题里面
max =Math.max.apply(null,h) ;
$("#con1_1").css("height",max);
/* 使用for in运算返回数组中某一值的对应项数(比如算出最小的高度值是数组里面的第几个) */
function getarraykey(s, v) {for(k in s) {if(s[k] == v) {return}}}
/*这里一定要用onload，因为图片不加载完就不知道高度值*/
window.onload = function() {liuxiaofan();};
window.onresize = function() {liuxiaofan();};
//鼠标在上样式
$(function(){
$(".product_list").hover(function(){
$(this).css("background-color","#ddd");
},function() {
$(this).css("background-color","#eee");
Views(...) Comments()最少代码的瀑布流实现
&请全屏，及使用chrome浏览效果最佳
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
微信公众平台开发教程
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
darkmatter-jinx
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
就一混蛋二逼小青年
在Fork了此代码
在Fork了此代码
在Fork了此代码
我叫波珠仔
在Fork了此代码
darkmatter-jinx
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
liunianmiyu
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
玉面小胡狸
在Fork了此代码
天蝎不信座
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
小鱼de理想
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
乔安娜风之化身
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
理发师Allen
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
Tony_seo_liu
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
赵哲TRENDS
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
飞翔的韶关人
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
广州美萌广告有限公司
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
minrui_fei
在Fork了此代码
在Fork了此代码
在Fork了此代码
VIP皇冠会员
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
Abrasumente
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
米壳网---科技资讯精选
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
小徐干开发
在Fork了此代码
在Fork了此代码
xuxiaosong
在Fork了此代码
在Fork了此代码
在Fork了此代码
dangbingqu
在Fork了此代码
在Fork了此代码
在Fork了此代码
低调不起来
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
小刀切大象
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
和自由的风
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
孤单de飞翔
在Fork了此代码
在Fork了此代码
china梦飞翔
在Fork了此代码
Star123light
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
倚窗听雨丿醉无心
在Fork了此代码
在Fork了此代码
在Fork了此代码
湖科oneway
在Fork了此代码
Jathon Zhu
在Fork了此代码
在Fork了此代码
Foghost Cn
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
指间缘你我连
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
Zhiyuan Su
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
helloyangzhi
在Fork了此代码
在Fork了此代码
在Fork了此代码
夏欧shayou
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
June Zhang
在Fork了此代码
在Fork了此代码
四叶草1024
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
carol_just_go
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
chenmingcc
在Fork了此代码
在Fork了此代码
在Fork了此代码
Caspar_home
在Fork了此代码
神說要有麵包
在Fork了此代码
在Fork了此代码
在Fork了此代码
后天给我打电话
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
麦卡密开发者平台
在Fork了此代码
在Fork了此代码
在Fork了此代码
angiie_inside
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
Jackitshot
在Fork了此代码
gouchangxing
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
孙强_strong
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
doublekingsoft
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
孩纸你需要治疗
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
Hey_Nigel_姚
在Fork了此代码
在Fork了此代码
在Fork了此代码
Jason_冰少
在Fork了此代码
在Fork了此代码
在Fork了此代码
bobkingdom
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
B9CodeMonkey
在Fork了此代码
在Fork了此代码
在Fork了此代码
月亮是我踢弯de
在Fork了此代码
在Fork了此代码
在Fork了此代码
开色尔·木太力甫
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
新鲜玩艺儿
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
YO嘴角上扬YO
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
秋裤塞在袜子里
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
houseDaine
在Fork了此代码
xuegen chen
在Fork了此代码
前端刘Xiao军
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
timytimytimy
在Fork了此代码
在Fork了此代码
在Fork了此代码
Catouse Sun
在Fork了此代码
bobkingdom
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
laughing_eng
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
Literature
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
苏格兰威士忌找不到了
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
我不是熊掌
在Fork了此代码
在Fork了此代码
叫我蝴蝶吧
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
葫芦一生_源
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
patrick=pk
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
明日天晴硬件ACG
在Fork了此代码
在Fork了此代码
Andy_Jerid
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
kevin_pang
在Fork了此代码
agangdundan
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
会美工的程序猿
在Fork了此代码
在Fork了此代码
在Fork了此代码
Wo兜兜Li有糖
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
Saphir Azure
在Fork了此代码
在Fork了此代码
mingzhehao
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
马大哈之吻
在Fork了此代码
在Fork了此代码
敲和尚的木鱼
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
Gimhoy Hill
在Fork了此代码
在Fork了此代码
JonasBollack
在Fork了此代码
nameisnull
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
Ahlon Chen
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
Wanyun Zhao
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
蛋蛋为何忧伤
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
Cheng Liang
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
mickelfeng
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
sky1988china
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
你我他说说说
在Fork了此代码
在Fork了此代码
在Fork了此代码
zhenfeng021
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
靠谱男青年
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
whitesweets
在Fork了此代码
在Fork了此代码
在Fork了此代码
上海网站建设
在Fork了此代码
在Fork了此代码
在Fork了此代码
vincent_xg
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
明天-后天-少年-走了
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
heibaiweilai
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
Unforgivable
在Fork了此代码
在Fork了此代码
在Fork了此代码
影子gaolei
在Fork了此代码
在Fork了此代码
douba-star
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
undertaker211
在Fork了此代码
在Fork了此代码
在Fork了此代码
对你何止爱
在Fork了此代码
在Fork了此代码
在Fork了此代码
Lyon°0.168
在Fork了此代码
Ta的最近动态
Fork了代码
Fork了代码
发布了代码 ()
发布了代码 ()
Fork了代码
Ta发布的其他代码(6)
&&8评/161Fork，更新于2年前。
&&2评/9Fork，更新于3年前。
&&0评/0Fork，更新于2年前。
&&0评/7Fork，更新于2年前。
&&0评/0Fork，更新于2年前。&&js开发实现简单瀑布流的特效这是一个简单的瀑布流大家可以学习下。/s/16YT6e这是我的云盘2个牛币请下载代码后再发表评论//JSWallper/JSWallper/.idea/JSWallper/.idea/.name/JSWallper/.idea/compiler.xml/JSWallper/.idea/copyright/JSWallper/.idea/copyright/profiles_settings.xml/JSWallper/.idea/encodings.xml/JSWallper/.idea/misc.xml/JSWallper/.idea/modules.xml/JSWallper/.idea/scopes精精精原精原原原原精原最热搜索分享话题编程语言基础Web开发数据库开发客户端开发脚本工具游戏开发服务器软硬件开源组件类库相关分享原精原精原精原原最近下载暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级最近浏览暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级扫描二维码关注最代码为好友"/>扫描二维码关注最代码为好友