首页 > 代码库 > 美美的瀑布流效果 你会吗?
美美的瀑布流效果 你会吗?
过了“圣诞节”,一切回归自然,兴奋,激动地心情过后,还有什么?
-----------------无疑,(代码陪着我)。。
今天忽然看一个瀑布流的效果,和大家分享一下!嘻嘻。。
1、html 代码
<div class="box"> <div class="pics"></div> </div>
2、css 样式(记得找一个公共样式的插件哦!)
<style> .box { width:845px; margin:0 auto; background:#fcf5f5; padding-left:5px; } .pics { position:relative; } .pics div { width:194px; background:#EEE; border:1px #DDD solid; padding:5px; margin:5px 5px 0 0; float:left; } </style>
3、接下来要引入三个javascript 文件(如图片所示)
注:jquery.1.9.0.min.js 是一个公共插件,自己下载引入一个即可,
(1)common.js
$(document).ready(function () { var arr = [0, 0, 0, 0]; var $boxes = $(createBoxs(10)); $boxes.imagesLoaded(function () { for (var i = 0, j = $boxes.length; i < j;i++){ var minNum = Math.min.apply(Math, arr), minIndex = arr.indexOf(minNum); $boxes.eq(i).animate({ left: minIndex * 211, top: minNum }, 1000); arr[minIndex] += $boxes.eq(i).outerHeight(true); var maxNum = Math.max.apply(Math, arr); $(‘.box‘).height(maxNum); } }) function createBoxs(num) { var boxArr = []; for (var i = 0; i < num ; i++) { var conIndex = Math.floor(Math.random() * 19); var maxNum = Math.max.apply(Math, arr); var $box = $("<div>", { html: "<img src=http://www.mamicode.com/‘images/p_0" + conIndex + ".jpg‘ />", css: { position: "absolute", left:340, top:maxNum} }).appendTo(".pics"); boxArr.push($box[0]); } return boxArr; } $(window).scroll(function () { var scrl = $(document).height() - $(window).height() - $(window).scrollTop(); if (scrl < 50) { var $boxes = $(createBoxs(5)); $boxes.imagesLoaded(function () { for (var i = 0, j = $boxes.length; i < j; i++) { var minNum = Math.min.apply(Math, arr), minIndex = arr.indexOf(minNum); $boxes.eq(i).animate({ left: minIndex * 211, top: minNum }, 1000); arr[minIndex] += $boxes.eq(i).outerHeight(true); var maxNum = Math.max.apply(Math, arr); $(‘.box‘).height(maxNum); } }) $(window).scrollTop($(document).height() - 100 - $(window).height()); } }) })
(2)IndexOf.js
if (!Array.prototype.indexOf) { Array.prototype.indexOf = function (searchElement /*, fromIndex */) { if (this == null) { throw new TypeError(); } var t = Object(this); var len = t.length >>> 0; if (len === 0) { return -1; } var n = 0; if (arguments.length > 1) { n = Number(arguments[1]); if (n != n) { // shortcut for verifying if it‘s NaN n = 0; } else if (n != 0 && n != Infinity && n != -Infinity) { n = (n > 0 || -1) * Math.floor(Math.abs(n)); } } if (n >= len) { return -1; } var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0); for (; k < len; k++) { if (k in t && t[k] === searchElement) { return k; } } return -1; }}
(3)jqueryImageloaded.js
$.fn.imagesLoaded = function (callback) {//定义一个imagesLoaded的函数且接受callback参数 var $this = this, $images = $this.find(‘img‘).add($this.filter(‘img‘)),//找出当前所有img标签,且含有img标签的元素 len = $images.length,//获取当前所有img标签的长度 blank = ‘data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==‘,//将图片转为16进制路劲 loaded = [];//定义一个名为loaded空数组 function triggerCallback() {//定义一个tiggerCallback函数,回调本函数用Call方法替代以前的$this,$images callback.call($this, $images); } function imgLoaded(event) {//定义一个imgLoaded函数,且使用event事件 var img = event.target;//定义一个名为img的event对象 if (img.src !== blank && $.inArray(img, loaded) === -1) {//??????????????????????????????????? loaded.push(img);//将img加入loaded数组中 if (--len <= 0) {//如果--len的值<=0 setTimeout(triggerCallback);//用定时器执行triggerCallback $images.unbind(‘.imagesLoaded‘, imgLoaded);//给$images解除imagesLoaded } } } // if no images, trigger immediately if (!len) {//如果len的值是false triggerCallback();//调用tiggerCallback函数 } $images.bind(‘load.imagesLoaded error.imagesLoaded‘, imgLoaded).each(function () { //给每个$images绑定load.imagesLoaded error.imagesLoaded‘和imgLoaded // cached images don‘t fire load sometimes, so we reset src. var src = http://www.mamicode.com/this.src;//将当前路径赋给src变量 // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f // data uri bypasses webkit log warning (thx doug jones) this.src = http://www.mamicode.com/blank;//析释当前图片路径 this.src = http://www.mamicode.com/src;//将src转赋给this.src }); return $this;};
注:图片是可以自己找的哦! 找一些美美的图片用代码实现成加载的效果!
美美的瀑布流效果 你会吗?
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。