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

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

这篇文章主要为大家详细介绍了网页瀑布流布局jQuery实现方式,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

什么是瀑布流网页布局？

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

下面来看代码，用纯CSS3来做看效果怎样！

HTML


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

<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


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

*{

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;

}

效果就出来了

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

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

CSS


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

*{

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


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

$(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;

//}

效果如下

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

（转载） http://www.jb51.net/article/95340.htm

时间： 2024-08-10 02:08:43

网页瀑布流布局jQuery实现代码的相关文章

用Masonry和jQuery.lazyload插件实现网页瀑布流布局

瀑布流布局 我们常能在网上看到很多瀑布流布局的页面,尤其是很多图片网站,例如百度图片.这种最典型的瀑布流布局,每个元素的宽度是固定的,但图片长度各不相同,于是通过下图这种样子竖着排列了下来,达到了最大的页面空间利用率. 因为对前端开发不了解,一开始为了找到这种布局叫什么名字也是花了我好久时间o(╯□╰)o 瀑布流布局不局限于等宽布局,例如下面这种形式也可以,来自Masonry官网截图. Masonry官网 http://masonry.desandro.com/ 瀑布流布局作为一种响应式布局,网

瀑布流布局--jQuery写法

HTML 1 <div id="main"> 2 <div class="box"> 3 <div class="pic"> 4 <img src="images/0.jpg" alt=""> 5 </div> 6 </div> 7 <div class="box"> 8 <div class=&q

瀑布流布局——jquery

首先确定定位,因为.box的宽度是确定的,根据屏幕的宽度来调整.box的列数,所以#content的宽度是随着.box的列数变化而变化的,并且需要保持相对于body居中. 因此需要给#content添加定位position: relative; 而.box的定位第一行relative没问题,除了第一行,其他行都是需要调整其top和left,使他们补齐和对其,因此其他行的定位需要absolute. 因此.box不需要设定position,后期动态为第二行以上的添加absolute. .box之间的

AJAX+json+jquery实现预加载瀑布流布局

宽度是一定的高度不定的瀑布流布局 也可以说是无缝拼图 当浏览器滚动到底部时候自动加载图片 加载的图片地址用json 在img.js里 ,还有正在加载动画是用 css3制作的 在ff等支持css3可以显示 你如果想全面支持浏览器可以用gif动画 代码里有详细解释就不多说了 ?1. [代码]预加载/瀑布流  <!doctype html><html><head><meta charset="utf-8"><title>定宽Jque

jquery.masonry + jquery.infinitescroll 实现瀑布流布局

转载自:http://www.cnblogs.com/liubiaocai/archive/2013/04/26/3044503.html 最近瀑布流布局非常流行,国内大大小小的瀑布流布局的网站都很多了,比如美丽说.蘑菇街.花瓣等,关于瀑布流布局的资料打开可以百度自己看了,这里介绍两个jquey插件实现瀑布流布局和动态加载数据(分页加载). 1.jquery.masonry,目前布局流行的瀑布流插件有很多,http://www.csswang.com/resource/2261.html,这里有

10几款网站瀑布流布局图片无限加载动效

jQuery选项卡形式图片瀑布流布局选项卡切换效果代码 jquery masonry瀑布流插件制作图片瀑布流布局代码 原生js简单瀑布流图片无限加载带鼠标悬停图片遮罩效果 jquery masonry瀑布流插件制作图片瀑布流布局代码 jquery柔韧性的图片滑动瀑布流布局 jquery时间轴插件文字图片瀑布流布局时间轴特效(不兼容IE678) modernizr html5图片预加载瀑布流布局鼠标悬停动画效果代码 jquery.waterfall.js自动底部填充对齐的瀑布流布局代码 jquer

基于jQuery网页步骤流程进度条代码

基于jQuery网页步骤流程进度条代码里面包含两款不同效果的jQuery步骤进度条特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="step_context test"></div> 当前步骤:第<input type="text" value="5" id="currentStepVal" />步 <button onclick=&qu

瀑布流布局使用详解——JQuery插件Isotope（动态实现子项目筛选）

瀑布流布局,听起来听牛逼的样子,其实就是简单的子元素筛选功能.不过这一功能在网站页面布局当中还是很常用的,特别是在电商网站中 经常会有点一个钮筛选,然后页面的子元素刷的以下变了样.接下来,我们先简单介绍下概念和用法,然后详解这一功能的实现. 瀑布流概念: 又称瀑布流式布局,是比较流行的一种网站页面布局方式.视觉表现为多栏布局,附带筛选功能,当下在国内十分流行. 瀑布流原理: 通过为子元素定义不同的class类名,然后通过类名及其内容进行筛选排序.   这一插件在实现网站元素动态切换,调整整体顺序

jQuery模拟瀑布流布局

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>瀑布流</title> <style type="text/css"> *{margin: 0; padding: 0; } body{text-align: center;} .content{margin: 0 auto ; text-align: center