瀑布流JS插件-php手册-PHP中文网

首页

php教程

php手册

瀑布流JS插件

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 07, 2016 am 11:44 AM

自己编写的一个ＪＳ瀑布流插件，里面有详细调用方法，代码易懂，新手学习，高手可路过。
/** *waterfall.js文件 * 瀑布流插件 * @author Gardenia <fooying> * window.onload = function(){ * waterfallinit({:''})//配置参数 * function success(data){}//添加节点函数，返回true * } *只需为瀑布流初始化函数 waterfallinit *配置一下函数 *父类ID： parent:'main', *子类ID： pin:'pin', *判断ajax是否返回成功： successFn:success, *loading显示的图片地址 loadImgSrc:'./pic/load.gif', *没有更多数据显示的图片地址 endImg:'./pic/end.gif', *数据请求地址 requestUrl:'request.php', *每次请求的图片数，默认15 requestNum:15, *选择显示时风格,可以不设置默认为1 style:4, *设置loading图片的ID loadImgId:loadImg, * * *添加数据到html successFn函数 function success(data){ var oParent = document.getElementById('main'); //获取父节点 for(i in data){ var oPin = document.createElement('div'); oPin.className = 'pin'; oParent.appendChild(oPin); var oBox = document.createElement('div'); oBox.className = 'box'; oPin.appendChild(oBox); var oImg = document.createElement('img'); oImg.src = './pic/'+data[i].src; oBox.appendChild(oImg); } return true; } } * * **/ function waterfallinit(json){ var parent = json.parent; var pin = json.pin; var successFn = json.successFn; var loadImgSrc = json.loadImgSrc; var endImgSrc = json.endImgSrc; var requestUrl = json.requestUrl; var requestNum = json.requestNum ? json.requestNum:10; var style = json.style; var loadImgId = json.loadImgId; var endImgId = json.endImgId; var oParent = document.getElementById(parent); //获取父节点 /*最初加载*/ ajaxRequest(); /*触动滚动条循环加载*/ var ajaxState = true; var page = 0; var endData = true; window.onscroll = function(){ if(checkScrollSite() && ajaxState && endData){ page++; ajaxState = false; ajaxRequest(); } } /*判断数据库数据返回数据是否为空*/ function checkData(data){ var oParent = document.getElementById(parent); //获取父节点 var bool = false; if(data[0] != undefined){ bool = true; }else{ bool = false; } return bool; } /*ajax请求*/ function ajaxRequest(){ $.ajax({ type:'GET', url:requestUrl, data:'page='+ page +'&requestNum=' + requestNum, dataType:'json', beforeSend:function(){ if(page){ var aPin = getClassObj(oParent,pin); //父节点下的class子节点数组 var lastPinH = aPin[aPin.length-1].offsetTop+ Math.floor(aPin[aPin.length-1].offsetHeight); addImg(loadImgSrc,loadImgId); } }, success:function(data){ if(successFn(data)){ waterfall(parent,pin,style); endData = checkData(data); if(!endData){ addImg(endImgSrc,endImgId); } } }, complete:function(data){ if(page){ oParent.removeChild(document.getElementById(loadImgId)); } ajaxState = true; } }) } /*校验滚动条位置*/ function checkScrollSite(){ //var aPin = getClassObj(oParent,pin); //父节点下的class子节点数组 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var documentH = document.documentElement.clientHeight; return getLastH()<scrolltop></scrolltop> } /*获取最末尾最短高度*/ function getLastH(){ var aPin = getClassObj(oParent,pin); //父节点下的class子节点数组 var lastPinH = aPin[aPin.length-1].offsetTop+Math.floor(aPin[aPin.length-1].offsetHeight); return lastPinH; } /*增加图片标签，如：loading图标*/ function addImg(src,id){ var loadImg = document.createElement('img'); loadImg.src = src; loadImg.id = id; oParent.appendChild(loadImg); loadImg.style.position = 'absolute'; loadImg.style.top = getLastH() + 'px'; loadImg.style.left = Math.floor(oParent.offsetWidth - loadImg.offsetWidth)/2 + 'px'; } } /* *瀑布流排列 * */ function waterfall(parent,pin,style){ var oParent = document.getElementById(parent); //获取父节点 var aPin = getClassObj(oParent,pin); //父节点下的class子节点数组 //alert(aPin.length); var iPinW = aPin[0].offsetWidth; //获取固定宽度 var num = Math.floor(oParent.offsetWidth/iPinW); //获取横向组数 oParent.style.cssText = 'width:' + num*iPinW +'px;margin:0px auto;position:relative'; //父类具体宽度 var compareAarr = []; var copareAll =[]; //alert(aPin.length); for(var i=0;i<apin.length></apin.length> if(i<num></num> compareAarr[i] = aPin[i].offsetHeight;//获取每个子节点的高度 }else{ var minH = Math.min.apply('',compareAarr);//获取最小值 var minKey = getMinKey(compareAarr,minH);//获取最小值的键值 compareAarr[minKey] += aPin[i].offsetHeight; setmoveStyle(aPin[i],minH,aPin[minKey].offsetLeft,i,style); } } } /* *通过class选择元素 */ function getClassObj(parent,className){ var obj = parent.getElementsByTagName('*'); var result = []; for (var i = 0; i if (obj[i].className == className) { result.push(obj[i]); } } return result; } /**设置运动风格 *setmoveStyle *@param obj 对象 *@param top 飞入布局 *@param left 飞入布局 *@param index *@param style 飞入形势选择 *1、从底下中间飞入 *2、透明度渐现 *3、从左右两边飞入 *4、从各组下渐现飞入 **/ var startNum = 0; function setmoveStyle(obj,top,left,index,style){ /*if(index return; }*/ obj.style.position = 'absolute'; switch(style){ case 1: //从底下中间飞入 obj.style.top = getTotalH() + 'px'; obj.style.left = Math.floor((document.documentElement.clientWidth-obj.offsetWidth)/2) + 'px'; $(obj).stop().animate({ top:top, left:left },600); break; case 2://渐现 obj.style.top = top + 'px'; obj.style.left = left + 'px'; obj.style.apacity = 0; obj.style.filter = 'alpha(opacity=0)'; $(obj).stop().animate({ opacity:1, },1000); break; case 3: obj.style.top = getTotalH() + 'px'; if(index % 2){ obj.style.left = -obj.offsetWidth + 'px'; }else{ obj.style.left = document.documentElement.clientWidth + 'px'; } $(obj).stop().animate({ top:top, left:left },1000); break; case 4: obj.style.top = getTotalH() + 'px'; obj.style.left = left +'px'; $(obj).stop().animate({ top:top, left:left },1600); break; } //更新索引 startNum = index; } /*获取滚动条的高度,总高度*/ function getTotalH(){ return document.documentElement.scrollHeight || document.body.scrollHeight; } /** *获取图片数组最小值的键值 * */ function getMinKey(arr,minH){ for (key in arr) { if(arr[key] == minH){ return key; } } } /*先图片返回数据从而固定布局，一般不用*/ function callBack(w,h,imgObj){ //alert(w+':'+h); imgObj.style.width = 205 + 'px'; var scale = w/205; imgObj.style.height = Math.floor(h/scale)+ 'px'; } /*先返回数据固定好布局后，图像加载*/ function loadImg(url,fn,imgObj){ var img = new Image(); img.src = url; if(img.complete){ //alert(img.width); fn(img.width,img.height,imgObj); }else{ img.onload = function(){ fn(img.width,img.height,imgObj); } } }</fooying>主页文件：index.htmlnbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script></script> <meta> <title>瀑布流第一课</title> <style> #maina { width: 1100px; } #maina .pina{ width: 225px; height: auto; padding: 15px 0px 0px 15px; float: left; } #maina .pina .box{ width: 205px; height: auto; padding: 10px; background: #fff; border: 1px solid #ccc; box-shadow: 0px 0px 6px #ccc; border-radius: 5px; } #maina .pina .box img{ width: 205px; } </style> <script></script> <script> window.onload = function(){ waterfallinit({ parent:'maina', pin:'pina', successFn:success, loadImgSrc:'./pic/load.gif', endImgSrc:'./pic/end.jpg', requestUrl:'request.php', requestNum:5, style:2, loadImgId:'loadImg', endImgId:'endImg', }) function success(data){ var oParent = document.getElementById('maina'); //获取父节点 for(i in data){ var oPin = document.createElement('div'); oPin.className = 'pina'; oParent.appendChild(oPin); var oBox = document.createElement('div'); oBox.className = 'box'; oPin.appendChild(oBox); var oImg = document.createElement('img'); oImg.src = './pic/'+data[i].src; oBox.appendChild(oImg); } return true; } } </script> <div> </div> 请求文件：request.php<?php header('Content-type:text/html;charset=utf-8'); $mysql = mysql_connect('localhost','root',''); mysql_query('set names utf8',$mysql); mysql_select_db('waterfall',$mysql); $page = isset($_GET['page'])?(int)$_GET['page']:0; $num = isset($_GET['requestNum'])?(int)$_GET['requestNum']:5; $startNum = $page*$num; $rows = mysql_query('select * from demo limit '.$startNum.','.$num.''); $data = array(); while($row = mysql_fetch_assoc($rows)){ $data[] = $row; } echo json_encode($data); ?>图片实例：

http://huaban.com/pins/93310215

数据库waterfall创建代码：

--
-- 表的结构 `demo`
--CREATE TABLE IF NOT EXISTS `demo` ( `id` int(10) NOT NULL AUTO_INCREMENT, `title` char(15) COLLATE utf8_bin NOT NULL, `src` char(13) COLLATE utf8_bin NOT NULL, `time` int(13) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin AUTO_INCREMENT=1;

AD：真正免费，域名+虚机+企业邮箱=0元

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

了解Python编程的入门级代码示例Jan 04, 2024 am 10:50 AM

了解Python编程的入门级代码示例Python是一种简单易学，功能强大的编程语言。对于初学者来说，了解Python编程的入门级代码示例是非常重要的。本文将为您提供一些具体的代码示例，帮助您快速入门。打印HelloWorldprint("HelloWorld")这是Python中最简单的代码示例。print()函数用于将指定的内容输出

PHP переменные в действии: 10 реальных примеров использованияFeb 19, 2024 pm 03:00 PM

PHP变量存储程序运行期间的值，对于构建动态且交互式的WEB应用程序至关重要。本文将深入探讨php变量，并通过10个真实的示例展示它们的实际应用。1.存储用户输入$username=$_POST["username"];$passWord=$_POST["password"];此示例从表单提交中提取用户名和密码，并将其存储在变量中以供进一步处理。2.设置配置值$database_host="localhost";$database_username="username";$database_pa

从入门到精通：Go语言中常用数据结构的代码实现Mar 04, 2024 pm 03:09 PM

标题：从入门到精通：Go语言中常用数据结构的代码实现数据结构在编程中起着至关重要的作用，它是程序设计的基础。在Go语言中，有许多常用的数据结构，掌握这些数据结构的实现方式对于成为一名优秀的程序员至关重要。本文将介绍Go语言中常用的数据结构，并给出相应的代码示例，帮助读者从入门到精通这些数据结构。1.数组（Array）数组是一种基本的数据结构，是一组相同类型

如何使用PHP编写库存管理系统中的库存分仓管理功能代码Aug 06, 2023 pm 04:49 PM

如何使用PHP编写库存管理系统中的库存分仓管理功能代码库存管理是许多企业中不可或缺的一部分。对于拥有多个仓库的企业来说，库存分仓管理功能尤为重要。通过合理管理和跟踪库存，企业可以实现不同仓库之间的库存调拨，优化运营成本，改善协同效率。本文将介绍如何使用PHP编写库存分仓管理功能的代码，并为您提供相关的代码示例。一、建立数据库在开始编写库存分仓管理功能的代码之

Java实现简单的冒泡排序代码Jan 30, 2024 am 09:34 AM

Java冒泡排序最简单的代码示例冒泡排序是一种常见的排序算法，它的基本思想是通过相邻元素的比较和交换来将待排序序列逐步调整为有序序列。下面是一个简单的Java代码示例，演示了如何实现冒泡排序：publicclassBubbleSort{publicstaticvoidbubbleSort(int[]arr){int

Go语言编程实例：Web开发中的代码示例Mar 04, 2024 pm 04:54 PM

《Go语言编程实例：Web开发中的代码示例》随着互联网的快速发展，Web开发已经成为各行业中必不可少的一部分。作为一门功能强大且性能优越的编程语言，Go语言在Web开发中越来越受到开发者们的青睐。本文将通过具体的代码示例，介绍如何利用Go语言进行Web开发，让读者能够更好地理解和运用Go语言来构建自己的Web应用。1.简单的HTTP服务器首先，让我们从一个

华为云边缘计算对接指南：Java代码示例快速实现接口Jul 05, 2023 pm 09:57 PM

华为云边缘计算对接指南：Java代码示例快速实现接口随着物联网技术的快速发展和边缘计算的兴起，越来越多的企业开始关注边缘计算的应用。华为云提供了边缘计算服务，为企业提供了高可靠的计算资源和便捷的开发环境，使得边缘计算应用更加容易实现。本文将介绍如何通过Java代码快速实现华为云边缘计算的接口。首先，我们需要准备好开发环境。确保你已经安装了Java开发工具包（

指导与示例：学习Java选择排序算法的实现Feb 18, 2024 am 10:52 AM

Java选择排序法代码编写指南及示例选择排序是一种简单直观的排序算法，其思想是每次从未排序的元素中选择最小（或最大）的元素进行交换，直到所有元素排序完成。本文将提供选择排序的代码编写指南，并附上具体的Java示例代码。算法原理选择排序的基本原理是将待排序数组分为已排序和未排序两部分，每次从未排序部分选择最小（或最大）的元素，将其放到已排序部分的末尾。重复上述

See all articles