特效介绍

jquery下拉会无限加载的瀑布流代码。当鼠标向下滚动的时候,图片会不断加载。每次刷新,图片排序都会不同。
使用方法
1、在头部加入下面的css样式:01 | <style type= "text/css" > |
02 | *{ margin : 0 ; padding : 0 ; list-style-type : none ;} |
03 | a,img{ border : 0 ;} |
04 | body{ font : 12px / 180% Arial , Helvetica , sans-serif , "新宋体" ;} |
05 | /* container */ |
06 | #container{ width : 940px ; margin : 50px auto ;} |
07 | #container ul{ width : 300px ; list-style : none ; float : left ; margin-right : 20px ;} |
08 | #container ul li{ margin-bottom : 20px ;} |
09 | #container ul li img{ width : 300px ;} |
10 | </style> |
01 | < div id = "container" > |
02 | < ul class = "col" > |
03 | < li >< img src = "img/1.jpg" alt = "" /></ li > |
04 | < li >< img src = "img/2.jpg" alt = "" /></ li > |
05 | < li >< img src = "img/3.jpg" alt = "" /></ li > |
06 | </ ul > |
07 | < ul class = "col" ></ ul > |
08 | < ul class = "col" style = "margin-right:0" ></ ul > |
09 | </ div > |
10 | < script type = "text/javascript" src = "http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js" ></ script > |
11 | < script type = "text/javascript" > |
12 | $(function(){ |
13 | //url data function dataType |
14 | function loadMeinv(){ |
15 | var data = 0; |
16 | for(var i=0;i< 9 ;i++){//每次加载时模拟随机加载图片 |
17 | data = parseInt (Math.random()*9); |
18 | var html = "" ; |
19 | html = '<li>< img src = img /' |
20 | +data+'.jpg>< p >src=' |
21 | +data+'.jpg</ p ></ li >'; |
22 | $minUl = getMinUl(); |
23 | $minUl.append(html); |
24 | } |
25 | } |
26 | loadMeinv(); |
27 | $(window).on("scroll",function(){ |
28 | $minUl = getMinUl(); |
29 | if($minUl.height() <= $(window).scrollTop()+$(window).height()){ |
30 | //当最短的ul的高度比窗口滚出去的高度+浏览器高度大时加载新图片 |
31 | loadMeinv(); |
32 | } |
33 | }) |
34 | function getMinUl(){//每次获取最短的ul,将图片放到其后 |
35 | var $arrUl = $("#container .col"); |
36 | var $minUl =$arrUl.eq(0); |
37 | $arrUl.each(function(index,elem){ |
38 | if($(elem).height()<$minUl.height()){ |
39 | $minUl = $(elem); |
40 | } |
41 | }); |
42 | return $minUl; |
43 | } |
44 | }) |
45 | </ script > |