jQuery瀑布流实例无限滚动加载图片

jquery masonry与infinitescroll两款瀑布流插件制作当下最流行的瀑布流图片展示实例，通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示。用户可以无限浏览图片或内容无限加载瀑布流效果。

 

Html代码 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>jquery瀑布流实例最流行瀑布流图片展示</title>  
  6. <meta name="description" content="jquery masonry与infinitescroll两款瀑布流插件制作当下最流行的瀑布流图片展示实例，通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示。用户可以无限浏览图片或内容无限加载瀑布流效果。" />  
  7.   
  8. <script type="text/javascript" src="http://www.jsfoot.com/skin/js/jquery.js"></script>  
  9. <script type="text/javascript" src="js/jquery.masonry.js"></script>  
  10. <script type="text/javascript" src="js/jquery.infinitescroll.js"></script>  
  11.   
  12.   
  13. <style type="text/css">  
  14. *{margin:0;padding:0;list-style-type:none;}  
  15. a,img{border:0;}  
  16. em{font-style:normal;}  
  17. a{text-decoration:none;cursor:pointer;color:#666666;}  
  18. a:hover{color:#FF6699;}  
  19. body{background:url("images/bodybg.jpg") repeat #f5f6f7;color:#666666;font-family:Arial;font-size:12px;}  
  20. .fl{float:left;}.fr{float:right;}  
  21. .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}  
  22. .clearfix{display:inline-table;}  
  23. *html .clearfix{height:1%;}  
  24. .clearfix{display:block;}  
  25. *+html .clearfix{min-height:1%;}  
  26. .demo{width:950px;margin:0 auto;}  
  27.   
  28. /* item_list */  
  29. .item_list{position:relative;padding:0 0 50px;}  
  30. .item{  
  31.     width:226px;background:#fff;overflow:hidden;margin:15px 0 0 0;  
  32.     border-radius:4px 4px 4px 4px;  
  33.     box-shadow:0 1px 3px rgba(34, 25, 25, 0.2);   
  34. }  
  35. .item_t{padding:10px 8px 0;}  
  36. .item_t .img{margin:0 auto;position:relative;width:210px;min-height:210px;}  
  37. .item_t .img a{display:block;}  
  38. .item_t .img a:hover{background:#000;}  
  39. .item_t .img a:hover img{filter:alpha(opacity=80);-khtml-opacity:0.8;opacity:0.8;-webkit-transition:all 0.3s ease-out;-khtml-transition:all 0.3s ease-out;}  
  40. .item_t .price{  
  41.     position:absolute;bottom:10px;right:0px;0, 0, 0.2);color:#FFF;  
  42.     filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#33000000, endcolorstr=#33000000);  
  43. }  
  44. .item .btns{display:none;}  
  45. .img_album_btn{top:0px;right:0px;position:absolute;background:#ff6fa6;color:#ffffff;height:20px;line-height:20px;width:56px;border-radius:3px;}  
  46. .img_album_btn:hover{color:#fff;}  
  47. .item_t .title{padding:8px 0;line-height:18px;}  
  48. .item_b{padding:10px 8px;}  
  49. .item_b .items_likes .like_btn{background:url("images/fav_icon_word_new_1220.png") no-repeat;display:block;float:left;height:23px;width:59px;margin-right:5px;}  
  50. .item_b .items_likes em{line-height:23px;display:block;float:left;padding:0px 6px;color:#FF6699;font-weight:800;border:1px solid #ff6fa6;border-radius:3px;}  
  51.   
  52. /* more */  
  53. #more{display:block;margin:10px auto 20px;}  
  54.   
  55. /* infscr-loading */  
  56. #infscr-loading{bottom:-10px;left:45%;position:absolute;text-align:center;height:20px;line-height:20px;z-index:100;width:120px;}  
  57.   
  58. /* page */  
  59. .page{display:none;font-size:18px;height:60px;text-align:center;margin:20px 0 0 0;}  
  60. .page_num a,.page_num span{margin:0 2px;background:url("images/page.png") no-repeat;display:inline-block;width:30px;height:28px;line-height:26px;overflow:hidden;}  
  61. .page_num a{background-position:-65px 0;color:#FF3333;overflow:hidden;}  
  62. .page_num .prev{background-position:1px -33px;}  
  63. .page_num .unprev{background-position:1px 0;cursor:default;}  
  64. .page_num .next{background-position:-32px 0;}  
  65. .page_num .unnext{background-position:-32px -33px;cursor:default;}  
  66. .page_num .current{background-position:-99px 0;color:#FFFFFF;}  
  67. .page_num .etc{background-position:-172px 8px;}  
  68.   
  69. /* to_top */  
  70. .to_top a,.to_top a:hover{background:url("images/gotop.png") no-repeat}  
  71. .to_top a{  
  72.     background-position:0 0;float:left;height:50px;overflow:hidden;width:50px;position:fixed;bottom:35px;cursor:pointer;right:20px;  
  73.     _position:absolute;  
  74.     _right:auto;  
  75.     _left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft, 10)||0)-(parseInt(this.currentStyle.marginRight, 10)||20));  
  76.     _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop, 10)||20)-(parseInt(this.currentStyle.marginBottom, 10)||20)));  
  77. }  
  78. .to_top a:hover{background-position:-51px 0px;}  
  79. </style>  
  80.   
  81. <script type="text/javascript">  
  82. var isWidescreen=screen.width>=1280;   
  83. if(isWidescreen){document.write("<style type='text/css'>.demo{width:1194px;}</style>");}  
  84. </script>  
  85.   
  86. <script type="text/javascript">  
  87. function item_masonry(){   
  88.     $('.item img').load(function(){   
  89.         $('.infinite_scroll').masonry({   
  90.             itemSelector: '.masonry_brick',  
  91.             columnWidth:226,  
  92.             gutterWidth:15                                
  93.         });       
  94.     });  
  95.           
  96.     $('.infinite_scroll').masonry({   
  97.         itemSelector: '.masonry_brick',  
  98.         columnWidth:226,  
  99.         gutterWidth:15                                
  100.     });   
  101. }  
  102.   
  103. $(function(){  
  104.   
  105.     function item_callback(){   
  106.           
  107.         $('.item').mouseover(function(){  
  108.             $(this).css('box-shadow', '0 1px 5px rgba(35,25,25,0.5)');  
  109.             $('.btns',this).show();  
  110.         }).mouseout(function(){  
  111.             $(this).css('box-shadow', '0 1px 3px rgba(34,25,25,0.2)');  
  112.             $('.btns',this).hide();           
  113.         });  
  114.           
  115.         item_masonry();   
  116.   
  117.     }  
  118.   
  119.     item_callback();    
  120.   
  121.     $('.item').fadeIn();  
  122.   
  123.     var sp = 1  
  124.       
  125.     $(".infinite_scroll").infinitescroll({  
  126.         navSelector     : "#more",  
  127.         nextSelector    : "#more a",  
  128.         itemSelector    : ".item",  
  129.           
  130.         loading:{  
  131.             img: "images/masonry_loading_1.gif",  
  132.             msgText: ' ',  
  133.             finishedMsg: '木有了',  
  134.             finished: function(){  
  135.                 sp++;  
  136.                 if(sp>=10){ //到第10页结束事件  
  137.                     $("#more").remove();  
  138.                     $("#infscr-loading").hide();  
  139.                     $("#page").show();  
  140.                     $(window).unbind('.infscr');  
  141.                 }  
  142.             }     
  143.         },errorCallback:function(){   
  144.             $("#page").show();  
  145.         }  
  146.           
  147.     },function(newElements){  
  148.         var $newElems = $(newElements);  
  149.         $('.infinite_scroll').masonry('appended', $newElems, false);  
  150.         $newElems.fadeIn();  
  151.         item_callback();  
  152.         return;  
  153.     });  
  154.   
  155. });  
  156. </script>  
  157. </head>  
  158.   
  159. <body>  
  160.   
  161. <div class="demo clearfix">  
  162.       
  163.               
  164.     <div class="item_list infinite_scroll">  
  165.       
  166.         <div class="item masonry_brick">  
  167.             <div class="item_t">  
  168.                 <div class="img">  
  169.                     <a href="http://www.jsfoot.com/js/images/more/2012-05-15/608.html"><img width="210" height="285" alt="js lazyload实现网页图片延迟加载特效" src="images/pic/01.jpg" /></a>  
  170.                     <span class="price">￥195.00</span>  
  171.                     <div class="btns">  
  172.                         <a href="http://www.jsfoot.com/js/images/more/2012-05-15/608.html" class="img_album_btn">加入专辑</a>  
  173.                     </div>  
  174.                 </div>  
  175.                 <div class="title"><span>js lazyload实现网页图片延迟加载特效</span></div>  
  176.             </div>  
  177.             <div class="item_b clearfix">  
  178.                 <div class="items_likes fl">  
  179.                     <a href="http://www.jsfoot.com" class="like_btn"></a>  
  180.                     <em class="bold">916</em>  
  181.                 </div>  
  182.                 <div class="items_comment fr"><a href="http://www.jsfoot.com">评论</a><em class="bold">(0)</em></div>  
  183.             </div>  
  184.         </div><!--item end-->  
  185.           
  186.         <div class="item masonry_brick">  
  187.             <div class="item_t">  
  188.                 <div class="img">  
  189.                     <a href="http://www.jsfoot.com/js/images/cj/2012-03-14/420.html"><img width="210" height="164" alt="js图片特效制作js焦点图上下滚动slider切换效果" src="images/pic/02.jpg" /></a>  
  190.                     <span class="price">￥195.00</span>  
  191.                     <div class="btns">  
  192.                         <a href="http://www.jsfoot.com/js/images/cj/2012-03-14/420.html" class="img_album_btn">加入专辑</a>  
  193.                     </div>  
  194.                 </div>  
  195.                 <div class="title"><span>js图片特效制作js焦点图上下滚动slider切换效果</span></div>  
  196.             </div>  
  197.             <div class="item_b clearfix">  
  198.                 <div class="items_likes fl">  
  199.                     <a href="http://www.jsfoot.com" class="like_btn"></a>  
  200.                     <em class="bold">916</em>  
  201.                 </div>  
  202.                 <div class="items_comment fr"><a href="http://www.jsfoot.com">评论</a><em class="bold">(0)</em></div>  
  203.             </div>  
  204.         </div><!--item end-->  
  205.           
  206.         <div class="item masonry_brick">  
  207.             <div class="item_t">  
  208.                 <div class="img">  
  209.                     <a href="http://www.jsfoot.com/js/menu/sx/2012-03-25/502.html"><img width="210" height="287" alt="js树形导航菜单制作垂直js导航条特效" src="images/pic/03.jpg" /></a>  
  210.                     <span class="price">￥195.00</span>  
  211.                     <div class="btns">  
  212.                         <a href="http://www.jsfoot.com/js/menu/sx/2012-03-25/502.html" class="img_album_btn">加入专辑</a>  
  213.                     </div>  
  214.                 </div>  
  215.                 <div class="title"><span>js树形导航菜单制作垂直js导航条特效</span></div>  
  216.             </div>  
  217.             <div class="item_b clearfix">  
  218.                 <div class="items_likes fl">  
  219.                     <a href="http://www.jsfoot.com" class="like_btn"></a>  
  220.                     <em class="bold">916</em>  
  221.                 </div>  
  222.                 <div class="items_comment fr"><a href="http://www.jsfoot.com">评论</a><em class="bold">(0)</em></div>  
  223.             </div>  
  224.         </div><!--item end-->  
  225.           
  226.         <div class="item masonry_brick">  
  227.             <div class="item_t">  
  228.                 <div class="img">  
  229.                     <a href="http://www.jsfoot.com/flash/images/2012-09-06/753.html"><img width="210" height="285" alt="flash图片导航条自动切换轮播焦点图" src="images/pic/04.jpg" /></a>  
  230.                     <span class="price">￥195.00</span>  
  231.                     <div class="btns">  
  232.                         <a href="http://www.jsfoot.com/flash/images/2012-09-06/753.html" class="img_album_btn">加入专辑</a>  
  233.                     </div>  
  234.                 </div>  
  235.                 <div class="title"><span>flash图片导航条自动切换轮播焦点图</span></div>  
  236.             </div>  
  237.             <div class="item_b clearfix">  
  238.                 <div class="items_likes fl">  
  239.                     <a href="http://www.jsfoot.com" class="like_btn"></a>  
  240.                     <em class="bold">916</em>  
  241.                 </div>  
  242.                 <div class="items_comment fr"><a href="http://www.jsfoot.com">评论</a><em class="bold">(0)</em></div>  
  243.             </div>  
  244.         </div><!--item end-->  
  245.           
  246.         <div class="item masonry_brick">  
  247.             <div class="item_t">  
  248.                 <div class="img">  
  249.                     <a href="http://www.jsfoot.com/flash/images/2012-06-04/640.html"><img width="210" height="323" alt="flash图片特效左右按钮控制图片折叠切换效果" src="images/pic/05.jpg" /></a>  
  250.                     <span class="price">￥195.00</span>  
  251.                     <div class="btns">  
  252.                         <a href="http://www.jsfoot.com/flash/images/2012-06-04/640.html" class="img_album_btn">加入专辑</a>  
  253.                     </div>  
  254.                 </div>  
  255.                 <div class="title"><span>flash图片特效左右按钮控制图片折叠切换效果</span></div>  
  256.             </div>  
  257.             <div class="item_b clearfix">  
  258.                 <div class="items_likes fl">  
  259.                     <a href="http://www.jsfoot.com" class="like_btn"></a>  
  260.                     <em class="bold">916</em>  
  261.                 </div>  
  262.                 <div class="items_comment fr"><a href="http://www.jsfoot.com">评论</a><em class="bold">(0)</em></div>  
  263.             </div>  
  264.         </div><!--item end-->  
  265.           
  266.         <div class="item masonry_brick">  
  267.             <div class="item_t">  
  268.                 <div class="img">  
  269.                     <a href="http://www.jsfoot.com/flash/images/2012-05-08/596.html"><img width="210" height="315" alt="flash焦点图片带内容与按钮的3D动画图片特效" src="images/pic/06.jpg" /></a>  
  270.                     <span class="price">￥195.00</span>  
  271.                     <div class="btns">  
  272.                         <a href="http://www.jsfoot.com/flash/images/2012-05-08/596.html" class="img_album_btn">加入专辑</a>  
  273.                     </div>  
  274.                 </div>  
  275.                 <div class="title"><span>flash焦点图片带内容与按钮的3D动画图片特效</span></div>  
  276.             </div>  
  277.             <div class="item_b clearfix">  
  278.                 <div class="items_likes fl">  
  279.                     <a href="http://www.jsfoot.com" class="like_btn"></a>  
  280.                     <em class="bold">916</em>  
  281.                 </div>  
  282.                 <div class="items_comment fr"><a href="http://www.jsfoot.com">评论</a><em class="bold">(0)</em></div>  
  283.             </div>  
  284.         </div><!--item end-->  
  285.           
  286.         <div class="item masonry_brick">  
  287.             <div class="item_t">  
  288.                 <div class="img">  
  289.                     <a href="http://www.jsfoot.com/flash/images/2012-03-11/388.html"><img width="210" height="282" alt="flash特效制作flash图片滚动带按钮控制左右图片滚动" src="images/pic/07.jpg" /></a>  
  290.                     <span class="price">￥195.00</span>  
  291.                     <div class="btns">  
  292.                         <a href="http://www.jsfoot.com/flash/images/2012-03-11/388.html" class="img_album_btn">加入专辑</a>  
  293.                     </div>  
  294.                 </div>  
  295.                 <div class="title"><span>flash特效制作flash图片滚动带按钮控制左右图片滚动</span></div>  
  296.             </div>  
  297.             <div class="item_b clearfix">  
  298.                 <div class="items_likes fl">  
  299.                     <a href="http://www.jsfoot.com" class="like_btn"></a>  
  300.                     <em class="bold">916</em>  
  301.                 </div>  
  302.                 <div class="items_comment fr"><a href="http://www.jsfoot.com">评论</a><em class="bold">(0)</em></div>  
  303.             </div>  
  304.         </div><!--item end-->  
  305.           
  306.         <div class="item masonry_brick">  
  307.             <div class="item_t">  
  308.                 <div class="img">  
  309.                     <a href="http://www.jsfoot.com/flash/images/2012-03-03/378.html"><img width="210" height="266" alt="flash焦点图切换特效制作各大网站的焦点图片轮播" src="images/pic/08.jpg" /></a>  
  310.                     <span class="price">￥195.00</span>  
  311.                     <div class="btns">  
  312.                         <a href="http://www.jsfoot.com/flash/images/2012-03-03/378.html" class="img_album_btn">加入专辑</a>  
  313.                     </div>  
  314.                 </div>  
  315.                 <div class="title"><span>flash焦点图切换特效制作各大网站的焦点图片轮播</span></div>  
  316.             </div>  
  317.             <div class="item_b clearfix">  
  318.                 <div class="items_likes fl">  
  319.                     <a href="http://www.jsfoot.com" class="like_btn"></a>  
  320.                     <em class="bold">916</em>  
  321.                 </div>  
  322.                 <div class="items_comment fr"><a href="http://www.jsfoot.com">评论</a><em class="bold">(0)</em></div>  
  323.             </div>  
  324.         </div><!--item end-->  
  325.           
  326.         <div class="item masonry_brick">  
  327.             <div class="item_t">  
  328.                 <div class="img">  
  329.                     <a href="http://www.jsfoot.com/flash/images/2012-03-03/374.html"><img width="210" height="254" alt="flash焦点图切换动画图片和标题文字配合显示含flash源码下载" src="images/pic/09.jpg" /></a>  
  330.                     <span class="price">￥195.00</span>  
  331.                     <div class="btns">  
  332.                         <a href="http://www.jsfoot.com/flash/images/2012-03-03/374.html" class="img_album_btn">加入专辑</a>  
  333.                     </div>  
  334.                 </div>  
  335.                 <div class="title"><span>flash焦点图切换动画图片和标题文字配合显示含flash源码下载</span></div>  
  336.             </div>  
  337.             <div class="item_b clearfix">  
  338.                 <div class="items_likes fl">  
  339.                     <a href="http://www.jsfoot.com" class="like_btn"></a>  
  340.                     <em class="bold">916</em>  
  341.                 </div>  
  342.                 <div class="items_comment fr"><a href="http://www.jsfoot.com">评论</a><em class="bold">(0)</em></div>  
  343.             </div>  
  344.         </div><!--item end-->  
  345.           
  346.         <div class="item masonry_brick">  
  347.             <div class="item_t">  
  348.                 <div class="img">  
  349.                     <a href="http://www.jsfoot.com/flash/images/2012-03-03/370.html"><img width="210" height="276" alt="flash图片切换左右滚动带序列索引按钮控制flash动画图片特效" src="images/pic/10.jpg" /></a>  
  350.                     <span class="price">￥195.00</span>  
  351.                     <div class="btns">  
  352.                         <a href="http://www.jsfoot.com/flash/images/2012-03-03/370.html" class="img_album_btn">加入专辑</a>  
  353.                     </div>  
  354.                 </div>  
  355.                 <div class="title"><span>flash图片切换左右滚动带序列索引按钮控制flash动画图片特效</span></div>  
  356.             </div>  
  357.             <div class="item_b clearfix">  
  358.                 <div class="items_likes fl">  
  359.                     <a href="http://www.jsfoot.com" class="like_btn"></a>  
  360.                     <em class="bold">916</em>  
  361.                 </div>  
  362.                 <div class="items_comment fr"><a href="http://www.jsfoot.com">评论</a><em class="bold">(0)</em></div>  
  363.             </div>  
  364.         </div><!--item end-->  
  365.           
  366.         <div class="item masonry_brick">  
  367.             <div class="item_t">  
  368.                 <div class="img">  
  369.                     <a href="http://www.jsfoot.com/flash/letter/2012-03-04/386.html"><img width="210" height="131" alt="flash文字特效制作数字类似文字打印效果,属于flash动画文字特效一种" src="images/pic/11.jpg" /></a>  
  370.                     <span class="price">￥195.00</span>  
  371.                     <div class="btns">  
  372.                         <a href="http://www.jsfoot.com/flash/letter/2012-03-04/386.html" class="img_album_btn">加入专辑</a>  
  373.                     </div>  
  374.                 </div>  
  375.                 <div class="title"><span>flash文字特效制作数字类似文字打印效果,属于flash动画文字特效一种</span></div>  
  376.             </div>  
  377.             <div class="item_b clearfix">  
  378.                 <div class="items_likes fl">  
  379.                     <a href="http://www.jsfoot.com" class="like_btn"></a>  
  380.                     <em class="bold">916</em>  
  381.                 </div>  
  382.                 <div class="items_comment fr"><a href="http://www.jsfoot.com">评论</a><em class="bold">(0)</em></div>  
  383.             </div>  
  384.         </div><!--item end-->  
  385.           
  386.         <div class="item masonry_brick">  
  387.             <div class="item_t">  
  388.                 <div class="img">  
  389.                     <a href="http://www.jsfoot.com/css3/layout/2011-10-13/215.html"><img width="210" height="131" alt="div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动" src="images/pic/12.jpg" /></a>  
  390.                     <span class="price">￥195.00</span>  
  391.                     <div class="btns">  
  392.                         <a href="http://www.jsfoot.com/css3/layout/2011-10-13/215.html" class="img_album_btn">加入专辑</a>  
  393.                     </div>  
  394.                 </div>  
  395.                 <div class="title"><span>div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动</span></div>  
  396.             </div>  
  397.             <div class="item_b clearfix">  
  398.                 <div class="items_likes fl">  
  399.                     <a href="http://www.jsfoot.com" class="like_btn"></a>  
  400.                     <em class="bold">916</em>  
  401.                 </div>  
  402.                 <div class="items_comment fr"><a href="http://www.jsfoot.com">评论</a><em class="bold">(0)</em></div>  
  403.             </div>  
  404.         </div><!--item end-->  
  405.           
  406.         <div class="item masonry_brick">  
  407.             <div class="item_t">  
  408.                 <div class="img">  
  409.                     <a href="http://www.jsfoot.com/css3/layout/2011-02-21/36.html"><img width="210" height="287" alt="CSS如何定位工程" src="images/pic/13.jpg" /></a>  
  410.                     <span class="price">￥195.00</span>  
  411.                     <div class="btns">  
  412.                         <a href="http://www.jsfoot.com/css3/layout/2011-02-21/36.html" class="img_album_btn">加入专辑</a>  
  413.                     </div>  
  414.                 </div>  
  415.                 <div class="title"><span>CSS如何定位工程</span></div>  
  416.             </div>  
  417.             <div class="item_b clearfix">  
  418.                 <div class="items_likes fl">  
  419.                     <a href="http://www.jsfoot.com" class="like_btn"></a>  
  420.                     <em class="bold">916</em>  
  421.                 </div>  
  422.                 <div class="items_comment fr"><a href="http://www.jsfoot.com">评论</a><em class="bold">(0)</em></div>  
  423.             </div>  
  424.         </div><!--item end-->  
  425.           
  426.         <div class="item masonry_brick">  
  427.             <div class="item_t">  
  428.                 <div class="img">  
  429.                     <a href="http://www.jsfoot.com/css3/menu/2011-09-21/197.html"><img width="210" height="323" alt="用div+css3美化制作动画导航特效鼠标滑过动画显示" src="images/pic/14.jpg" /></a>  
  430.                     <span class="price">￥195.00</span>  
  431.                     <div class="btns">  
  432.                         <a href="http://www.jsfoot.com/css3/menu/2011-09-21/197.html" class="img_album_btn">加入专辑</a>  
  433.                     </div>  
  434.                 </div>  
  435.                 <div class="title"><span>用div+css3美化制作动画导航特效鼠标滑过动画显示</span></div>  
  436.             </div>  
  437.             <div class="item_b clearfix">  
  438.                 <div class="items_likes fl">  
  439.                     <a href="http://www.jsfoot.com" class="like_btn"></a>  
  440.                     <em class="bold">916</em>  
  441.                 </div>  
  442.                 <div class="items_comment fr"><a href="http://www.jsfoot.com">评论</a><em class="bold">(0)</em></div>  
  443.             </div>  
  444.         </div><!--item end-->  
  445.           
  446.         <div class="item masonry_brick">  
  447.             <div class="item_t">  
  448.                 <div class="img">  
  449.                     <a href="http://www.jsfoot.com/css3/menu/2011-02-20/22.html"><img width="210" height="304" alt="用div+css制作一个CSS3的简约图标导航菜单" src="images/pic/15.jpg" /></a>  
  450.                     <span class="price">￥195.00</span>  
  451.                     <div class="btns">  
  452.                         <a href="http://www.jsfoot.com/css3/menu/2011-02-20/22.html" class="img_album_btn">加入专辑</a>  
  453.                     </div>  
  454.                 </div>  
  455.                 <div class="title"><span>用div+css制作一个CSS3的简约图标导航菜单</span></div>  
  456.             </div>  
  457.             <div class="item_b clearfix">  
  458.                 <div class="items_likes fl">  
  459.                     <a href="http://www.jsfoot.com" class="like_btn"></a>  
  460.                     <em class="bold">916</em>  
  461.                 </div>  
  462.                 <div class="items_comment fr"><a href="http://www.jsfoot.com">评论</a><em class="bold">(0)</em></div>  
  463.             </div>  
  464.         </div><!--item end-->  
  465.           
  466.         <div class="item masonry_brick">  
  467.             <div class="item_t">  
  468.                 <div class="img">  
  469.                     <a href="http://www.jsfoot.com/html5/tx/2011-08-13/120.html"><img width="210" height="315" alt="jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示" src="images/pic/16.jpg" /></a>  
  470.                     <span class="price">￥195.00</span>  
  471.                     <div class="btns">  
  472.                         <a href="http://www.jsfoot.com/html5/tx/2011-08-13/120.html" class="img_album_btn">加入专辑</a>  
  473.                     </div>  
  474.                 </div>  
  475.                 <div class="title"><span>jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示</span></div>  
  476.             </div>  
  477.             <div class="item_b clearfix">  
  478.                 <div class="items_likes fl">  
  479.                     <a href="http://www.jsfoot.com" class="like_btn"></a>  
  480.                     <em class="bold">916</em>  
  481.                 </div>  
  482.                 <div class="items_comment fr"><a href="http://www.jsfoot.com">评论</a><em class="bold">(0)</em></div>  
  483.             </div>  
  484.         </div><!--item end-->  
  485.           
  486.         <div class="item masonry_brick">  
  487.             <div class="item_t">  
  488.                 <div class="img">  
  489.                     <a href="http://www.jsfoot.com/html5/tx/2011-02-21/42.html"><img width="210" height="314" alt="jquery 幻灯片切换应用一个HTML5的幻灯片" src="images/pic/17.jpg" /></a>  
  490.                     <span class="price">￥195.00</span>  
  491.                     <div class="btns">  
  492.                         <a href="http://www.jsfoot.com/html5/tx/2011-02-21/42.html" class="img_album_btn">加入专辑</a>  
  493.                     </div>  
  494.                 </div>  
  495.                 <div class="title"><span>jquery 幻灯片切换应用一个HTML5的幻灯片</span></div>  
  496.             </div>  
  497.             <div class="item_b clearfix">  
  498.                 <div class="items_likes fl">  
  499.                     <a href="http://www.jsfoot.com" class="like_btn"></a>  
  500.                     <em class="bold">916</em>  
  501.                 </div>  
  502.                 <div class="items_comment fr"><a href="http://www.jsfoot.com">评论</a><em class="bold">(0)</em></div>  
  503.             </div>  
  504.         </div><!--item end-->  
  505.       
  506.     </div>  
  507.                       
  508.                       
  509.     <div id="more"><a href="page/2.html"></a></div>  
  510.                       
  511.     <div id="page" class="page" style="display:none;">  
  512.         <div class="page_num">  
  513.             <span class="unprev"></span>  
  514.             <span class="current">1</span>  
  515.             <a href="http://www.jsfoot.com">&nbsp;2&nbsp;</a>  
  516.             <a href="http://www.jsfoot.com">&nbsp;3&nbsp;</a>  
  517.             <a href="http://www.jsfoot.com">&nbsp;4&nbsp;</a>  
  518.             <a href="http://www.jsfoot.com">&nbsp;5&nbsp;</a>  
  519.             <span class="etc"></span>  
  520.             <a href="http://www.jsfoot.com">12</a>  
  521.             <a href="http://www.jsfoot.com" class="next"></a>  
  522.         </div>  
  523.     </div>  
  524.   
  525. </div>  
  526.                       
  527. <div style="display:none;" id="gotopbtn" class="to_top"><a title="返回顶部" href="javascript:void(0);"></a></div>  
  528.                       
  529.   
  530. <script type="text/javascript">  
  531. $(function(){  
  532.   
  533.     $(window).scroll(function(){  
  534.         $(window).scrollTop()>1000 ? $("#gotopbtn").css('display','').click(function(){  
  535.             $(window).scrollTop(0);  
  536.         }):$("#gotopbtn").css('display','none');      
  537.     });  
  538.       
  539. });  
  540. </script>  
  541.   
  542. </body>  
  543. </html>  

 

===============仅供参考==============

posted @ 2016-01-04 17:43  烟-波-天-客  阅读(176)  评论(0)  编辑  收藏  举报