网页瀑布流布局jQuery实现代码


Posted in Javascript onOctober 21, 2016

什么是瀑布流网页布局?

网页瀑布流布局jQuery实现代码

瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。

下面来看代码,用纯CSS3来做看效果怎样!

HTML

<div id="all">
<div class="box">
<div class="pic">
<img src="cars/1.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="cars/2.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="cars/3.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="cars/4.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="cars/5.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="cars/6.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="cars/7.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="cars/8.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="cars/9.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="cars/10.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="cars/11.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="cars/12.jpg"/>
</div>
</div>
</div>

这里用一个大盒子来装全部内容,小盒子box装块内容,pic盒子装图片。看css的代码

CSS

*{
margin: 0;
padding: 0;
}

#all{
/*关键代码*/
-webkit-column-width: 437px;
-moz-column-width: 437px;
-o-column-width: 437px;
-ms-column-width: 437px;
/*-webkit-column-count: 3;
-moz-column-count: 3;
-o-column-count: 3;
-ms-column-count: 3;*/
/*-webkit-column-rule: 2px dashed #F00;
-moz-column-rule: 2px dashed #F00;
-o-column-rule: 2px dashed #F00;
-ms-column-rule: 2px dashed #F00;*/
/*-webkit-column-gap: 5px;
-moz-column-gap: 5px;
-o-column-gap: 5px;
-ms-column-gap: 5px;*/
}

.box{
padding: 15px 0 0 15px;
}
.pic{
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px #ccc ;
width: 400px;
}
.pic>img{
width: 400px;
height: auto;
}

效果就出来了

网页瀑布流布局jQuery实现代码

可见CSS3虽然实现了瀑布流,但是画风看起来诡异,左右排布间距不够灵活。列宽随着浏览器窗口大小进行改变,用户体验不好,图片排序按照垂直顺序排列,打乱图片显示顺序,图片加载还是依靠JavaScript来实现。唯一优势是不需要计算,浏览器自动计算,只需设置列宽,性能高。

为了得到更好的效果,所以我们还是用算法来实现吧,下面来看jquery代码配合css来实现瀑布流。

CSS

*{
margin: 0;
padding: 0;
}


#all{
position: relative;
}
.box{
padding: 15px 0 0 15px;
float: left;
}
.pic{
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px #ccc ;
}
.pic>img{
width: 400px;
height: auto;
}

jquery

$(window).load(function(){
waterfall();
// var dataInt={"data":[{"src":"cars/1.jpg"},{"src":"cars/2.jpg"},{"src":"cars/3.jpg"},{"src":"cars/4.jpg"}]}
// $(window).scroll(function(){
// if(checkScrollSlide){
// $.each(dataInt.data,function(key,value){
// var oBox=$("<div>").addClass("box").appendTo($("#all"));
// var oPic=$("<div>").addClass("pic").appendTo($(oBox));
// var oImg=$("<img>").attr("src",$(value).attr("src")).appendTo($(oPic));
// })
// waterfall();
// }
// })
})

function waterfall(){
var $boxs=$("#all>div");
var w=$boxs.eq(0).outerWidth();
var cols=Math.floor($(window).width()/w);
$('#all').width(w*cols).css("margin","0 auto");
var hArr=[];
$boxs.each(function(index,value){
var h=$boxs.eq(index).outerHeight();
if(index<cols){
hArr[index]=h;
}else{
var minH=Math.min.apply(null,hArr);
var minHIndex=$.inArray(minH,hArr);
// console.log(minH);
$(value).css({
'position':'absolute',
'top':minH+'px',
'left':minHIndex*w+'px'
})
hArr[minHIndex]+=$boxs.eq(index).outerHeight();
}
});
}


//function checkScrollSlide(){
// var $lastBox=$("#all>div").last();
// var lastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);
// var scrollTop=$(window).scrollTop();
// var documentH=$(window).height();
// return(lastBoxDis<scrollTop+documentH)?true:false;
//}

效果如下

网页瀑布流布局jQuery实现代码

很明显效果好多了,图片排序是按照图片计算的位置横向排序,位置是计算出来的,比较规范。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
window.open()弹出居中的窗口
Feb 01 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
Apr 16 Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 Javascript
JavaScript面向对象编程入门教程
Apr 16 Javascript
JavaScript中textRange对象使用方法小结
Mar 24 Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 Javascript
JavaScript 中有关数组对象的方法(详解)
Aug 15 Javascript
Django使用多数据库的方法
Sep 06 Javascript
微信小程序如何获取openid及用户信息
Jan 26 Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 Javascript
JavaScript canvas动画实现时钟效果
Feb 10 Javascript
vue el-upload上传文件的示例代码
Dec 21 Vue.js
js运动事件函数详解
Oct 21 #Javascript
javascript轮播图算法
Oct 21 #Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
Oct 21 #Javascript
javascript简易画板开发
Apr 12 #Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 #Javascript
BootStrap轻松实现微信页面开发代码分享
Oct 21 #Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 #Javascript
You might like
php小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
Bootstrap项目实战之子栏目资讯内容
2016/04/25 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
JavaScript实现三级级联特效
2017/11/05 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
Python中pillow知识点学习
2018/04/30 Python
Python使用while循环花式打印乘法表
2019/01/28 Python
python一些性能分析的技巧
2020/08/30 Python
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
使用html5制作loading图的示例
2014/04/14 HTML / CSS
amazeui页面分析之登录页面的示例代码
2020/08/25 HTML / CSS
工程管理专业毕业生自荐信
2014/01/24 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
养成教育经验材料
2014/05/26 职场文书
财务负责人岗位职责
2015/02/03 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
煤矿施工安全协议书
2016/03/22 职场文书
mongodb清除连接和日志的正确方法分享
2021/09/15 MongoDB
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android
Win11 S Mode版本泄露 正式上线后叫做Windows 11 SE
2021/11/21 数码科技