<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>示例</title>

     <link href="Styles/demo.css" rel="stylesheet" type="text/css" />

     <script src="jquery/jquery-1.4.4.min.js" type="text/javascript"></script>

     <script src="jquery/jquery-1.4.4.src.js" type="text/javascript"></script>

     <script src="jquery/demo.js" type="text/javascript"></script>

 </head>

 <body>

     <div class="top">

     </div>

     <div class="list">

         <div class="img_list" id="img_list">

             <div class="items" id="items">

                 <ul class="item">

                     <li class="i_thumb"><a href="#" target="_blank">

                         <img src="data:image/201411.jpg" /></a></li>

                     <li class="i_title"><span class="order"></span><a href="#" target="_blank">图片</a></li>

                 </ul>

                 <ul class="item">

                     <li class="i_thumb"><a href="#" target="_blank">

                         <img src="data:image/201411.jpg" /></a></li>

                     <li class="i_title"><span class="order"></span><a href="#" target="_blank">图片</a></li>

                 </ul>

                 <ul class="item">

                     <li class="i_thumb"><a href="#" target="_blank">

                         <img src="data:image/201411.jpg" /></a></li>

                     <li class="i_title"><span class="order"></span><a href="#" target="_blank">图片</a></li>

                 </ul>

                 <ul class="item">

                     <li class="i_thumb"><a href="#" target="_blank">

                         <img src="data:image/201411.jpg" /></a></li>

                     <li class="i_title"><span class="order"></span><a href="#" target="_blank">图片</a></li>

                 </ul>

                 <div class="clear">

                 </div>

             </div>

             <div class="showmore" id="showmore">

                 <a class="handle" href="javascript:show()">显示更多结果</a></div>

         </div>

     </div>

 </body>

 </html>

Html Code

 img

 {

     border: ;

 }

 a

 {

     cursor: pointer;

     color: #014ccc;

     text-decoration: underline;

 }

 a:hover

 {

     text-decoration: none;

 }

 .clear

 {

     clear: both;

     height: 0px;

     overflow: hidden;

 }

 .img_list

 {

     margin:  auto;

 }

 .img_list li

 {

     list-style: none;

 }

 .img_list .items

 {

     margin:  auto;

 }

 .img_list .item

 {

     width: 260px;

     float: left;

     margin-bottom: 5px;

     font-size: 14px;

 }

 .img_list .item .order

 {

     display: inline-block;

     width: 28px;

     color: #f30;

 }

 .img_list .item .i_thumb

 {

     width: %;

     height: 280px;

 }

 .img_list .item .i_title

 {

     width: %;

     height: 20px;

 }

 .showmore

 {

     height: 35px;

     background: #f8f8f8;

     border-bottom: 1px solid #cccccc;

     cursor: pointer;

     text-align: center;

     margin-bottom: 25px;

 }

 .showmore .handle

 {

     display: block;

     height: 35px;

     text-align: center;

     color: #;

     font-size: 14px;

     text-decoration: none;

     line-height: 35px;

 }

 .showmore .handle:hover

 {

     text-decoration: none;

     background: #e6e6e6;

 }

 .top

 {

     width: %;

     height: 100px;

     border: 1px solid #;

 }

 .list

 {

     margin:  auto;

     margin-top: 20px;

     width: 1200px;

     border: 1px solid #;

 }

 @media screen and (min-width: 1201px)

 {

     .list

     {

         width: 1200px;

     }

 }

 /* css 注释说明：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */

 /*

         @media screen and (max-width: 1200px)

         {

             .list

             {

                 width: 900px;

             }

         }*/

 /* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */

 /*

         @media screen and (max-width: 900px)

         {

             .list

             {

                 width: 200px;

             }

         }

         */

 /* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */

 /*

         @media screen and (max-width: 500px)

         {

             .list

             {

                 width: 100px;

             }

         }

         */

 /* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */

demo.css

 var iHeight = ;

 var iTop = ;

 var clientHeight = ;

 var iIntervalId = null;

 var itemsSize = ;

 var pageNo = ;   // 当前页数，默认设为第 1 页

 var pageSize = ; // 每页显示的数量

 getPageHeight();

 // 添加定时检测事件，每2秒检测一次

 iIntervalId = setInterval("_onScroll();", );

 // 取得当前页面显示所占用的高度

 function getPageHeight() {

     if (document.body.clientHeight && document.documentElement.clientHeight) {

         clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;

     } else {

         clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;

     }

     iHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);

 }

 // 调用ajax取服务端数据

 function show() {

     //            pageNo++;

     //            $.ajax({

     //                url: 'Handler.ashx?p=' + pageNo + '&r=' + Math.random(),

     //                type: 'GET',

     //                dataType: 'text',

     //                timeout: 4000,

     //                beforeSend: showLoadingImg,

     //                error: showFailure,

     //                success: function (date){

     //把取出的数据转换为html

     //                }

     //            });

     showDate();

 }

 function showDate() {

     var pageOffset = (pageNo - ) * pageSize + ;

     itemsSize = ;

     var nextpagehtml = '';

     for (i = ; i < itemsSize; i++) {

         nextpagehtml += '<ul class="item">';

         nextpagehtml += '<li class="i_thumb"><a href="#" target="_blank" title="tupian"><img src="data:image/201411.jpg" alt="1" /></a></li>';

         nextpagehtml += '<li class="i_title"><span class="order">' + (pageOffset + i) + '</span><a href="#" target="_blank" title="tupian">链接</a></li>';

         nextpagehtml += '</ul>';

     }

     nextpagehtml += '<div class="clear"></div>';

     $('#items').html($('#items').html() + nextpagehtml);

     // 当前页码数小于3页时继续显示更多提示框

     if (pageNo < ) {

         $('#showmore').html('<a class="handle" href="javascript:show()">显示更多结果</a>');

     } else {

         clearInterval(iIntervalId);

         $('#showmore').hide();

     }

 }

 function showLoadingImg() {

     $('#showmore').html('<a class="handle" href="javascript:show()"><img src="data:image/load.jpg" height="32px" />显示更多结果</a>');

 }

 function showFailure() {

     $('#showmore').html('<font color=red> 获取查询数据出错 </font>');

 }

 // 判断滚动条是否到达底部

 function reachBottom() {

     var scrollTop = ;

     if (document.documentElement && document.documentElement.scrollTop) {

         scrollTop = document.documentElement.scrollTop;

     } else if (document.body) {

         scrollTop = document.body.scrollTop;

     }

     if ((scrollTop > ) && (scrollTop + clientHeight == iHeight)) {

         return true;

     } else {

         return false;

     }

 }

 // 检测事件，检测滚动条是否接近或到达页面的底部区域，0.99是为了更接近底部时

 function _onScroll() {

     iTop = document.documentElement.scrollTop + document.body.scrollTop;

     getPageHeight();

     if (((iTop + clientHeight) > parseInt(iHeight * 0.99)) || reachBottom()) {

         if (pageNo >= ) {

             clearInterval(iIntervalId);

             $('#showmore').hide();

             return;

         }

         show();

     }

 };

demo.js

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

网站图片列表动态显示、根据屏幕宽度动态设置DIV的CSS样式的更多相关文章

  1. 根据屏幕大小动态设置字体rem

    1.根据屏幕大小动态设置字体rem var docEl = document.documentElement, //当设备的方向变化(设备横向持或纵向持)此事件被触发.绑定此事件时, //注意现在当浏 ...

  2. 动态为页面添加CSS样式文件引用

    动态为页面添加CSS样式文件引用: if (document.createStyleSheet) { //IE document.createStyleSheet("./Themes/Def ...

  3. JavaScript动态设置div的样式的方法

    有时候需要根据需要动态设置div的样式,当然对于稍有经验的javascript开发者来说,这一切都是那么的简单,但是对于初学者或者说没有相关经验的开发者来说可能就是一个不大不小的难关,下面就通过实例简 ...

  4. jQuery动态追加移除CSS样式

    jQuery基础知识,动态添加删除CSS样式 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  5. js 动态设置 div 背景图片 并滚动显示

    var imgs =["../img/index/bgstyle/style1/index_top_bg2.jpg", "../img/index/bgstyle/sty ...

  6. 动态设置Div坐标

    <style type="text/css"> #main{text-align:center; background-color:#9FF; height:600px ...

  7. Js 动态设置DIV日期信息

    HTML代码如下: <div  id="time"> 2013年12月20日 14:49:02 星期五 </div> JS代码如下: window.onlo ...

  8. JS判断浏览器类型和屏幕分辨率来调用不同的CSS样式

    代码如下: <!-- if (window.navigator.userAgent.indexOf("MSIE")>=1) { var IE1024="&qu ...

  9. jQuery 动态添加、删除css样式

    1.addClass css中: <style type="text/css">       .chColor {background: #267cb7;color:w ...

随机推荐

  1. 【LeetCode练习题】Linked List Cycle II

    Linked List Cycle Given a linked list, determine if it has a cycle in it. Follow up:Can you solve it ...

  2. Unity FixedUpdate 与 Update 的线程关系实验

    先上结论:FixedUpdate 与 Update 在同一个线程上. 实验过程: 1.打印 FixedUpdate 和 Update 的线程编号 void FixedUpdate () { Debug ...

  3. Lining Up（在一条直线上的最大点数目，暴力）

    Lining Up Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total ...

  4. VB读写Excel

        近期用excel和VB比較多,就简单的学习了一下VB中对Excel的处理.今天就介绍一些吧.       在VB中要想调用Excel,须要打开VB编程环境“project”菜单中的“引用”项目 ...

  5. Android分析第三方应用layout的神器

    hierarchyviewer.bat或者monitor.bat一直都是分析layout的神器,只是.非常多时候不好用,连不上真机,害的我不得不使用模拟器来分析layout. 今天发现了另外一个神器. ...

  6. 关于Oracle数据库字符集的选择

    如果数据库只在中国地区使用,数据库字符集选择ZHS16GBK或者常用中文字符集,如果不确定,就推荐使用AL32UTF8 国家字符集就选择: AL16UTF16 字符集一旦设定,不允许修改,修改可能出现 ...

  7. jqery ajax读取json文件

    json文件数据 [ {"name":"哈哈··","email":"邮箱01","gender": ...

  8. sql生成20位数随机数

    declare @rnd nvarchar(50)set @rnd =''while LEN(@rnd)<20 begin set @rnd =@rnd + REPLACE ( CONVERT( ...

  9. JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  10. javac编译原理（一）

    我们都知道,计算机只能识别二进制语言,是不能直接识别java c c++等高级语言的.将高级语言转化成计算机可以是别的二进制语言,这个过程就叫编译. 有次面试,面试官问了一道“java的编译原理是什么 ...