zoukankan      html  css  js  c++  java

  • 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{950px;margin:0 auto;}  
    27.   
    28. /* item_list */  
    29. .item_list{position:relative;padding:0 0 50px;}  
    30. .item{  
    31.     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;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;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;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;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;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;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{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>  

    ===============仅供参考==============
  • 相关阅读:
    在HTML文件中加载js
    HTML表单的问题
    HTML自动换行的问题
    HTML的结束标签问题
    数据库基本知识
    PHP中数据库的连接
    2014年7月
    3.2版本视频讲解知识点
    2014年7月
    选项卡
  • 原文地址：https://www.cnblogs.com/xm1-ybtk/p/5099762.html
Copyright © 2011-2022 走看看