search
HomeWeb Front-endHTML TutorialDynamically display the website image list and dynamically set the CSS style of the DIV according to the screen width_html/css_WEB-ITnose

 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="Dynamically display the website image list and dynamically set the CSS style of the DIV according to the screen width_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="Dynamically display the website image list and dynamically set the CSS style of the DIV according to the screen width_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="Dynamically display the website image list and dynamically set the CSS style of the DIV according to the screen width_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="Dynamically display the website image list and dynamically set the CSS style of the DIV according to the screen width_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="Dynamically display the website image list and dynamically set the CSS style of the DIV according to the screen width_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 };

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
Explain the importance of using consistent coding style for HTML tags and attributes.Explain the importance of using consistent coding style for HTML tags and attributes.May 01, 2025 am 12:01 AM

A consistent HTML encoding style is important because it improves the readability, maintainability and efficiency of the code. 1) Use lowercase tags and attributes, 2) Keep consistent indentation, 3) Select and stick to single or double quotes, 4) Avoid mixing different styles in projects, 5) Use automation tools such as Prettier or ESLint to ensure consistency in styles.

How to implement multi-project carousel in Bootstrap 4?How to implement multi-project carousel in Bootstrap 4?Apr 30, 2025 pm 03:24 PM

Solution to implement multi-project carousel in Bootstrap4 Implementing multi-project carousel in Bootstrap4 is not an easy task. Although Bootstrap...

How does deepseek official website achieve the effect of penetrating mouse scroll event?How does deepseek official website achieve the effect of penetrating mouse scroll event?Apr 30, 2025 pm 03:21 PM

How to achieve the effect of mouse scrolling event penetration? When we browse the web, we often encounter some special interaction designs. For example, on deepseek official website, �...

How to modify the playback control style of HTML videoHow to modify the playback control style of HTML videoApr 30, 2025 pm 03:18 PM

The default playback control style of HTML video cannot be modified directly through CSS. 1. Create custom controls using JavaScript. 2. Beautify these controls through CSS. 3. Consider compatibility, user experience and performance, using libraries such as Video.js or Plyr can simplify the process.

What problems will be caused by using native select on your phone?What problems will be caused by using native select on your phone?Apr 30, 2025 pm 03:15 PM

Potential problems with using native select on mobile phones When developing mobile applications, we often encounter the need for selecting boxes. Normally, developers...

What are the disadvantages of using native select on your phone?What are the disadvantages of using native select on your phone?Apr 30, 2025 pm 03:12 PM

What are the disadvantages of using native select on your phone? When developing applications on mobile devices, it is very important to choose the right UI components. Many developers...

How to optimize collision handling of third-person roaming in a room using Three.js and Octree?How to optimize collision handling of third-person roaming in a room using Three.js and Octree?Apr 30, 2025 pm 03:09 PM

Use Three.js and Octree to optimize collision handling of third-person roaming in the room. Use Octree in Three.js to implement third-person roaming in the room and add collisions...

What problems will you encounter when using native select on your phone?What problems will you encounter when using native select on your phone?Apr 30, 2025 pm 03:06 PM

Issues with native select on mobile phones When developing applications on mobile devices, we often encounter scenarios where users need to make choices. Although native sel...

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools