网站图片列表动态显示、根据屏幕宽度动态设置DIV的CSS样式_html/css_WEB-ITnose

 1  2  3       4 5      6      7      8      9     10 11 12     
13     
14     
15         
16             
17                 
18                     
19                         
20                     

1图片
21                 
22                 
23                     
24                         
25                     

2图片
26                 
27                 
28                     
29                         
30                     

3图片
31                 
32                 
33                     
34                         
35                     

4图片
36                 
37                 
38                 
39             
40             
41                 显示更多结果
42         
43     
44 45 

  1 img  2 {  3     border: 0;  4 }  5 a  6 {  7     cursor: pointer;  8     color: #014ccc;  9     text-decoration: underline; 10 } 11 a:hover 12 { 13     text-decoration: none; 14 } 15 .clear 16 { 17     clear: both; 18     height: 0px; 19     overflow: hidden; 20 } 21 .img_list 22 { 23     margin: 0 auto; 24 } 25 .img_list li 26 { 27     list-style: none; 28 } 29 .img_list .items 30 { 31     margin: 0 auto; 32 } 33 .img_list .item 34 { 35     width: 260px; 36     float: left; 37     margin-bottom: 5px; 38     font-size: 14px; 39 } 40 .img_list .item .order 41 { 42     display: inline-block; 43     width: 28px; 44     color: #f30; 45 } 46 .img_list .item .i_thumb 47 { 48     width: 100%; 49     height: 280px; 50 } 51 .img_list .item .i_title 52 { 53     width: 100%; 54     height: 20px; 55 } 56 .showmore 57 { 58     height: 35px; 59     background: #f8f8f8; 60     border-bottom: 1px solid #cccccc; 61     cursor: pointer; 62     text-align: center; 63     margin-bottom: 25px; 64 } 65 .showmore .handle 66 { 67     display: block; 68     height: 35px; 69     text-align: center; 70     color: #909090; 71     font-size: 14px; 72     text-decoration: none; 73     line-height: 35px; 74 } 75 .showmore .handle:hover 76 { 77     text-decoration: none; 78     background: #e6e6e6; 79 } 80 .top 81 { 82     width: 100%; 83     height: 100px; 84     border: 1px solid #000; 85 } 86 .list 87 { 88     margin: 0 auto; 89     margin-top: 20px; 90     width: 1200px; 91     border: 1px solid #000; 92 } 93 @media screen and (min-width: 1201px) 94 { 95     .list 96     { 97         width: 1200px; 98     } 99 }100 /* css 注释说明：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */101 /*102         @media screen and (max-width: 1200px)103         {104             .list105             {106                 width: 900px;107             }108         }*/109 /* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */110 /*111         @media screen and (max-width: 900px)112         {113             .list114             {115                 width: 200px;116             }117         }118         */119 /* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */120 /*121         @media screen and (max-width: 500px)122         {123             .list124             {125                 width: 100px;126             }127         }128         */129 /* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */

  1 var iHeight = 0;  2 var iTop = 0;  3 var clientHeight = 0;  4 var iIntervalId = null;  5 var itemsSize = 0;  6 var pageNo = 1;   // 当前页数，默认设为第 1 页  7 var pageSize = 4; // 每页显示的数量  8   9 getPageHeight(); 10  11 // 添加定时检测事件，每2秒检测一次 12 iIntervalId = setInterval("_onScroll();", 2000); 13  14 // 取得当前页面显示所占用的高度 15 function getPageHeight() { 16     if (document.body.clientHeight && document.documentElement.clientHeight) { 17         clientHeight = (document.body.clientHeight  document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight; 21     } 22  23     iHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); 24 } 25  26 // 调用ajax取服务端数据 27 function show() { 28     //            pageNo++; 29     //            $.ajax({ 30     //                url: 'Handler.ashx?p=' + pageNo + '&r=' + Math.random(), 31     //                type: 'GET', 32     //                dataType: 'text', 33     //                timeout: 4000, 34     //                beforeSend: showLoadingImg, 35     //                error: showFailure, 36     //                success: function (date){ 37     //把取出的数据转换为html 38     //                } 39     //            }); 40     showDate(); 41 } 42  43 function showDate() { 44     var pageOffset = (pageNo - 1) * pageSize + 1; 45     itemsSize = 8; 46     var nextpagehtml = ''; 47     for (i = 0; i '; 49         nextpagehtml += '

'; 50 nextpagehtml += '

' + (pageOffset + i) + '链接

'; 51 52 nextpagehtml += ''; 53 } 54 nextpagehtml += ''; 55 $('#items').html($('#items').html() + nextpagehtml); 56 57 // 当前页码数小于3页时继续显示更多提示框 58 if (pageNo 显示更多结果'); 60 } else { 61 clearInterval(iIntervalId); 62 $('#showmore').hide(); 63 } 64 } 65 66 function showLoadingImg() { 67 $('#showmore').html('显示更多结果'); 68 } 69 70 function showFailure() { 71 $('#showmore').html(' 获取查询数据出错 '); 72 } 73 74 // 判断滚动条是否到达底部 75 function reachBottom() { 76 var scrollTop = 0; 77 if (document.documentElement && document.documentElement.scrollTop) { 78 scrollTop = document.documentElement.scrollTop; 79 } else if (document.body) { 80 scrollTop = document.body.scrollTop; 81 } 82 if ((scrollTop > 0) && (scrollTop + clientHeight == iHeight)) { 83 return true; 84 } else { 85 return false; 86 } 87 } 88 89 // 检测事件，检测滚动条是否接近或到达页面的底部区域，0.99是为了更接近底部时 90 function _onScroll() { 91 iTop = document.documentElement.scrollTop + document.body.scrollTop; 92 getPageHeight(); 93 if (((iTop + clientHeight) > parseInt(iHeight * 0.99)) || reachBottom()) { 94 if (pageNo >= 3) { 95 clearInterval(iIntervalId); 96 $('#showmore').hide(); 97 return; 98 } 99 show();100 }101 };

初涉前端开发，一点小知识，积累下来自己用，贴出来大家共享，大侠自动飘过哈！