Webサイトの画像一覧を動的に表示し、画面幅に応じてDIVのCSSスタイルを動的に設定_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

Webサイトの画像一覧を動的に表示し、画面幅に応じて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="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 };

ログイン後にコピー

フロントエンド開発は初めてですが、知識は少しありますが、自分用に蓄積して投稿してみんなと共有します、ヒーローが自動的に通り過ぎます！

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。