Home > Article > Web Front-end > Dynamically display the website image list and dynamically set the CSS style of the DIV according to the screen width_html/css_WEB-ITnose
Dynamically display the website image list and dynamically set the CSS style of the DIV according to the screen width_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:47:191432browse
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>示例</title> 6 <link href="Styles/demo.css" rel="stylesheet" type="text/css" /> 7 <script src="jquery/jquery-1.4.4.min.js" type="text/javascript"></script> 8 <script src="jquery/jquery-1.4.4.src.js" type="text/javascript"></script> 9 <script src="jquery/demo.js" type="text/javascript"></script>10 </head>11 <body>12 <div class="top">13 </div>14 <div class="list">15 <div class="img_list" id="img_list">16 <div class="items" id="items">17 <ul class="item">18 <li class="i_thumb"><a href="#" target="_blank">19 <img src="image/201411.jpg" /></a></li>20 <li class="i_title"><span class="order">1</span><a href="#" target="_blank">图片</a></li>21 </ul>22 <ul class="item">23 <li class="i_thumb"><a href="#" target="_blank">24 <img src="image/201411.jpg" /></a></li>25 <li class="i_title"><span class="order">2</span><a href="#" target="_blank">图片</a></li>26 </ul>27 <ul class="item">28 <li class="i_thumb"><a href="#" target="_blank">29 <img src="image/201411.jpg" /></a></li>30 <li class="i_title"><span class="order">3</span><a href="#" target="_blank">图片</a></li>31 </ul>32 <ul class="item">33 <li class="i_thumb"><a href="#" target="_blank">34 <img src="image/201411.jpg" /></a></li>35 <li class="i_title"><span class="order">4</span><a href="#" target="_blank">图片</a></li>36 </ul>37 <div class="clear">38 </div>39 </div>40 <div class="showmore" id="showmore">41 <a class="handle" href="javascript:show()">显示更多结果</a></div>42 </div>43 </div>44 </body>45 </html>
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; 18 } else { 19 20 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 < itemsSize; i++) { 48 nextpagehtml += '<ul class="item">'; 49 nextpagehtml += '<li class="i_thumb"><a href="#" target="_blank" title="tupian"><img src="image/201411.jpg" alt="1" /></a></li>'; 50 nextpagehtml += '<li class="i_title"><span class="order">' + (pageOffset + i) + '</span><a href="#" target="_blank" title="tupian">链接</a></li>'; 51 52 nextpagehtml += '</ul>'; 53 } 54 nextpagehtml += '<div class="clear"></div>'; 55 $('#items').html($('#items').html() + nextpagehtml); 56 57 // 当前页码数小于3页时继续显示更多提示框 58 if (pageNo < 3) { 59 $('#showmore').html('<a class="handle" href="javascript:show()">显示更多结果</a>'); 60 } else { 61 clearInterval(iIntervalId); 62 $('#showmore').hide(); 63 } 64 } 65 66 function showLoadingImg() { 67 $('#showmore').html('<a class="handle" href="javascript:show()"><img src="image/load.jpg" height="32px" />显示更多结果</a>'); 68 } 69 70 function showFailure() { 71 $('#showmore').html('<font color=red> 获取查询数据出错 </font>'); 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 }; I am new to front-end development. I have accumulated a little knowledge and used it myself. I posted it and shared it with everyone. The heroes will automatically pass by!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn