瀑布流布局--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="pic">
 9                 <img src="images/1.jpg" alt="">
10             </div>
11         </div>
12         <div class="box">
13             <div class="pic">
14                 <img src="images/2.jpg" alt="">
15             </div>
16         </div>
17         <div class="box">
18             <div class="pic">
19                 <img src="images/3.jpg" alt="">
20             </div>
21         </div>
22         <div class="box">
23             <div class="pic">
24                 <img src="images/4.jpg" alt="">
25             </div>
26         </div>
27         <div class="box">
28             <div class="pic">
29                 <img src="images/2.jpg" alt="">
30             </div>
31         </div>
32 </div>

CSS

 1 * {
 2     margin: 0;
 3     padding: 0;
 4 }
 5 #main {
 6     position: relative;
 7
 8 }
 9 .box {
10     padding:15px 0 0 15px;
11     float:left;
12 }
13 .pic {
14     padding: 10px;
15     border: 1px solid #ccc;
16     border-radius: 5px;
17     box-shadow: 0px 0px 5px #ccc;
18     img {
19         width:165px;
20         height:auto;
21     }
22 }

JavaScript

 1 $(window).on("load",function () {
 2     waterfall();
 3     var dataInt = { "data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"6.jpg"}]}
 4     //模拟json数据;
 5     $(window).on("scroll",function () {
 6         if(checkScrollSlide){
 7             $.each(dataInt.data,function (key,value) {
 8                 var oBox=$("<div>").addClass("box").appendTo($("#main"));
 9                 //jQuery支持连缀,隐式迭代;
10                 var oPic=$("<div>").addClass(‘pic‘).appendTo($(oBox));
11                 $("<img>").attr("src","images/"+$(value).attr("src")).appendTo(oPic);
12             });
13             waterfall();
14         }
15     })
16 });
17 //流式布局主函数;
18 function waterfall () {
19     var $boxs=$("#main>div");
20     //获取#main元素下的直接子元素div.box;
21
22     //获取每一列的宽度;
23     var w=$boxs.eq(0).outerWidth();
24     //outerWidth()获取包含padding和border在内的宽度;
25     //var w=$boxs.eq(0).width();
26     //width()只能获取给元素定义的宽度;
27
28     var cols=Math.floor($(window).width()/w);
29     //获取多少列;
30     $("#main").width(w*cols).css("margin","0 auto");
31     //设置#main元素的宽度和居中样式;
32
33     var hArr=[];
34     //每一列高度的集合;
35     $boxs.each(function (index,value) {
36     //遍历每一个box元素;
37     //为了找到之前所有元素的最低点,然后将本元素设置到最低点之下;
38         var h=$boxs.eq(index).outerHeight();
39         //每一个box元素的高,
40         if (index<cols) {
41             hArr[index]=h;
42             //确定每列第一个元素的高度;
43         } else{
44             var minH=Math.min.apply(null,hArr);
45             //得出列高数组中的最小高度;
46             var minHIndex=$.inArray(minH,hArr);
47             //$.inArray()方法得出元素(minH)在数组(hArr)中的index值;
48             //console.log(value);
49             //此时的value是第一行之后的所有的box元素的DOM对象!;
50             $(value).css({
51             //$(value):将DOM对象转换成jQuery对象,才能继续使用jQuery方法;
52                 "position":"absolute",
53                 "top":minH+"px",
54                 "left":minHIndex*w+"px"
55             });
56             hArr[minHIndex]+=$boxs.eq(index).outerHeight();
57             //最低高元素的高度+刚添加到最低高度下的元素的高度=新的列高;
58         };
59     });
60     // console.log(hArr);
61 };
62 function checkScrollSlide () {
63     var $lastBox=$("#main>div").last();
64     var lastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);
65     var scrollTop=$(window).scrollTop();
66     var documentH=$(window).height();
67     return (lastBoxDis<scrollTop+documentH)?true:false;
68 }
时间: 2024-10-28 14:38:38

瀑布流布局--jQuery写法的相关文章

网页瀑布流布局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 2

瀑布流布局——jquery

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

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

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

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

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

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,这里有

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

jQuery Wookmark 瀑布流布局

瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 版本: jQuery v1.4.3+ jQuery Wookmark Load v1.4.8 注意事项: 项目中的 img 元素的 width 和 height 属性需要写,否则定位会不准确.(可以用 JavaScript 实时获取图片的宽高,但图片数量过多时,这将是一件不靠谱的事情,如果你执意要这么做,可以参考这个 Demo) 查看 Demo 下载 jQuery Wookmark

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

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

jQuery响应式网站图片无限加载瀑布流布局

这是一款效果非常酷的 jQuery瀑布流布局无限加载图片效果.整个页面采用响应式布局,图片采用jQuery.Lazyload延时加载技术,提升整个页面的加载速度. 该瀑布流插件还使用BlocksIt技术,在图片加载时有交互抢占位置的动画特效,效果非常炫酷. 在线演示:http://www.htmleaf.com/Demo/2014100223.html 下载地址:http://www.htmleaf.com/jQuery/pubuliuchajian/2014100224.html