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

首页

web前端

html教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:47 AM

 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="/static/imghwm/default1.png"  data-src="image/201411.jpg"  class="lazy" / alt="网站图片列表动态显示、根据屏幕宽度动态设置DIV的CSS样式_html/css_WEB-ITnose" ></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="/static/imghwm/default1.png"  data-src="image/201411.jpg"  class="lazy" / alt="网站图片列表动态显示、根据屏幕宽度动态设置DIV的CSS样式_html/css_WEB-ITnose" ></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="/static/imghwm/default1.png"  data-src="image/201411.jpg"  class="lazy" / alt="网站图片列表动态显示、根据屏幕宽度动态设置DIV的CSS样式_html/css_WEB-ITnose" ></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="/static/imghwm/default1.png"  data-src="image/201411.jpg"  class="lazy" / alt="网站图片列表动态显示、根据屏幕宽度动态设置DIV的CSS样式_html/css_WEB-ITnose" ></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="/static/imghwm/default1.png"  data-src="image/201411.jpg"  class="lazy" 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="/static/imghwm/default1.png"  data-src="image/load.jpg"  class="lazy" height="32px" / alt="网站图片列表动态显示、根据屏幕宽度动态设置DIV的CSS样式_html/css_WEB-ITnose" >显示更多结果</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 };

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

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

如何验证您的HTML代码？Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript：比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

HTML作为标记语言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容，其目的在于提供一种标准化的方式来展示信息。1）HTML通过标签和属性组织网页的各个部分，如标题和段落。2）它支持内容与表现分离，提升维护效率。3）HTML具有可扩展性，允许自定义标签增强SEO。

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

See all articles