JS实现列表的响应式排版(推荐)

先给大家展示下效果图,如果感觉还不错,请参考实现代码。

一、每行固定个数:保证排版的美观

.list li{
width:20%;display:inline-block;
*display:inline;*zoom:1;overflow:hidden;
}

二、随页面宽度调整个数和大小:保证图文的可读性

.list li{
width:20%;display:inline-block;
*display:inline;*zoom:1;overflow:hidden;
}

1、媒体查询控制宽度

@media screen and (max-width:1280px){
.list-table1 li{width:25%}
}
@media screen and (max-width:600px){
.list-table1 li{width:33.3%}
}
@media screen and (max-width:400px){
.list-table1 li{width:50%}
}

方便、但存在兼容性

2、JS控制

$(window).resize(function () {
resizeList();
})
function resizeList(){
var s_width=$(window).width();
//console.log("s_width:"+s_width);
if(s_width>600 && s_width <=1280)
{
$(".list-table1 li").css("width","25%");
}else if(s_width>400 && s_width <=600){
$(".list-table1 li").css("width","33.3%");
}else if(s_width>200 && s_width <=400){
$(".list-table1 li").css("width","50%");
}else if(s_width<=200){
$(".list-table1 li").css("width","100%");
}
}
$(window).resize()实时获取浏览器的宽度

注意事项:

1、图片不变形

.a-common{width:auto;height:auto;}
.a-common img{width:100%;height:auto;}

2、文字溢出处理

.title, .subtitle{
width:auto;text-align:center;
overflow:hidden;white-space:nowrap;
text-overflow:ellipsis;
}

以上所述是小编给大家介绍的JS实现列表的响应式排版,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2016-08-30

在DIV+CSS排版中新闻列表的制作方法

CSS代码: .list{ margin: 0px 10px 20px; text-align: left; } .list ul{ list-style-type: none; margin: 0px; padding: 0px; } .list li{ background: url(/news/images/line.gif) repeat-x bottom; /*列表底部的虚线*/ width: 100%; } .list li a{ color: #777777; display: b

经典Javascript正则表达式[优质排版]

匹配中文字符的正则表达式: 复制代码 代码如下: [\u4e00-\u9fa5] 匹配双字节字符(包括汉字在内): 复制代码 代码如下: [^\x00-\xff] 应用:计算字符串的长度(一个双字节字符长度计2,ASCII字符计1) 复制代码 代码如下: String.prototype.len=function(){ return this.replace([^\x00-\xff]/g,"aa").length; } 匹配空行的正则表达式: 复制代码 代码如下: \n[\s|]*\r

经典JavaScript正则表达式实战(附pdf)

关于测试代码 本文不是使用Dreamweaver编辑,以下测试代码可能已经在赋值粘贴的过程做了一些调整,可能执行失效.可以参看本文的pdf版本. 匹配结尾的数字 如 复制代码 代码如下: 30CAC0040 取出40 3SFASDF92 取出92 正则如下:/\d+$/g 统一空格个数 字符串内字符键有空格,但是空格的数量可能不一致,通过正则将空格的个数统一变为一个. 例如:蓝 色 理 想 变成:蓝 色 理 想 aobert的正则: 复制代码 代码如下: <script type="tex

PHP经典实用正则表达式小结

本文实例讲述了PHP经典实用正则表达式.分享给大家供大家参考,具体如下: 对于开发人员来说,正则表达式是一个非常有用的功能,它提供了 查找,匹配,替换 句子,单词,或者其他格式的字符串.这里介绍了几个超实用的php正则表达式,需要的朋友可以参考下. 1. 验证域名检验一个字符串是否是个有效域名 <?php $url = "https://www.baidu.com"; if (preg_match('/^(http|https|ftp):\/\/([A-Z0-9][A-Z0-9_

15个常用的javaScript正则表达式(收藏)

1 用户名正则 //用户名正则,4到16位(字母,数字,下划线,减号) var uPattern = /^[a-zA-Z0-9_-]{4,16}$/; //输出 true console.log(uPattern.test("iFat3")); 2 密码强度正则 //密码强度正则,最少6位,包括至少1个大写字母,1个小写字母,1个数字,1个特殊字符 var pPattern = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%

JavaScript正则表达式校验与递归函数实际应用实例解析

JS递归函数(菲波那切数列) 实例解析: 一组数字:0 1 1 2 3 5 8 13 0 1 2 3 4 5 6 7 sl(0)=0; sl(1)=1; sl(2)=sl(0)+sl(1); sl(3)=sl(1)+sl(2); function sl(i){ if(i==0){ return 0; }else if(i==1){ return 1; }else{ return sl(i-1)+sl(i-2); } } 正则表达式检验 //校验是否全由数字组成 function isDigit(

JavaScript正则表达式上之基本语法(推荐)

相关阅读: js正则表达式基本语法(精粹) 正则表达式语法 一个正则表达式就是由普通字符(例如字符 a 到 z)以及特殊字符(称为元字符)组成的文字模式.该模式描述在查找文字主体时待匹配的一个或多个字符串.正则表达式作为一个模板,将某个字符模式与所搜索的字符串进行匹配. 定义 JavaScript种正则表达式有两种定义方式,定义一个匹配类似 <%XXX%> 的字符串 1. 构造函数 复制代码 代码如下: var reg=new RegExp('<%[^%>]+%>','g')

javascript正则表达式使用replace()替换手机号的方法

本文实例讲述了javascript正则表达式使用replace()替换手机号的方法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: <html> <head> <title>javascript正则表达式使用replace()替换手机号</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" />

JavaScript正则表达式小结(test|match|search|replace|split|exec)

学JavaScript正则的好文一篇:http://www.cainiao8.com/web/js_note/js_regular_expression.html test:测试string是否包含有匹配结果,包含返回true,不包含返回false. <script type="text/javascript"> var str = "bbs.byr.cn"; var reg = /b/; var ret = reg.test(str); alert(r

JavaScript正则表达式exec/g实现多次循环用法示例

本文实例讲述了JavaScript正则表达式exec/g实现多次循环用法.分享给大家供大家参考,具体如下: var x = "a.xxx.com b.xxx.com c.xxx.com"; 希望得到 ["a","b","c"] 这三个结果 1. 正则需要 添加 g 2. exec 循环,直到返回空 代码如下,会输出 a b c var x = "a.xxx.com b.xxx.com c.xxx.com";

JavaScript正则表达式验证代码(推荐)

RegExp:是正则表达式(regular expression)的简写. 正则表达式描述了字符的模式对象.可以使用正则表达式来描述要检索的内容. 简单的模式可以是一个单独的字符.更复杂的模式包括了更多的字符,并可用于解析.格式检查.替换等等. //判断输入内容是否为空 function IsNull(){ var str = document.getElementById('str').value.trim(); if(str.length==0){ alert('对不起,文本框不能为空或者为