网页瀑布流布局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 相关文章推荐
jquery.boxy插件的iframe扩展代码
Jul 02 Javascript
jQuery判断元素是否存在的可靠方法
May 06 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
Aug 05 Javascript
jQuery中$(function() {});问题详解
Aug 10 Javascript
js操作数组函数实例小结
Dec 10 Javascript
在JSP中如何实现MD5加密的方法
Nov 02 Javascript
Vue.js实现价格计算器功能
Mar 30 Javascript
[js高手之路]原型式继承与寄生式继承详解
Aug 28 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
详解如何探测小程序返回到webview页面
May 14 Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 Javascript
React 高阶组件HOC用法归纳
Jun 13 Javascript
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
PHP4 与 MySQL 交互使用
2006/10/09 PHP
PHP中的日期及时间
2006/11/23 PHP
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
javascript replace()正则替换实现代码
2010/02/26 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
jQuery 中ajax异步调用的四种方式
2016/06/28 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
浅谈关于iview表单验证的问题
2018/09/29 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
2019/04/04 jQuery
JSONP解决JS跨域问题的实现
2020/05/25 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
教你使用python实现微信每天给女朋友说晚安
2018/03/23 Python
Python 从相对路径下import的方法
2018/12/04 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
Python是怎样处理json模块的
2020/07/16 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
解决python 执行shell命令无法获取返回值的问题
2020/12/05 Python
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
库房管理员岗位职责
2014/03/09 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
最美家庭活动方案
2014/08/31 职场文书
导游词400字
2015/02/13 职场文书
学生检讨书怎么写
2015/05/07 职场文书
法制主题班会教案
2015/08/13 职场文书
详解GaussDB for MySQL性能优化
2021/05/18 MySQL