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


Posted in Javascript onSeptember 01, 2016

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

JS实现列表的响应式排版(推荐)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实现列表的响应式排版,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS命名空间的另一种实现
Aug 09 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
jQuery判断元素上是否绑定了指定事件的方法
Mar 17 Javascript
基于javascript实现彩票随机数生成(简单版)
Apr 17 Javascript
三种Node.js写文件的方式
Mar 08 Javascript
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
如何在js代码中消灭for循环实例详解
Jul 29 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
Nov 14 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
Aug 08 Javascript
微信小程序定义和调用全局变量globalData的实现
Nov 01 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
Nov 19 Javascript
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
利用Jquery队列实现根据输入数量显示的动画
Sep 01 #Javascript
JavaScript中子对象访问父对象的方式详解
Sep 01 #Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 #Javascript
老生常谈JavaScript 函数表达式
Sep 01 #Javascript
Ubuntu系统下Angularjs开发环境安装
Sep 01 #Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
Sep 01 #Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 #Javascript
You might like
使用PHP模拟HTTP认证
2006/10/09 PHP
php生成验证码函数
2015/10/20 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
javascript使用activex控件的代码
2011/01/27 Javascript
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
js 窗口抖动示例
2013/09/04 Javascript
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
node.js中的path.sep方法使用说明
2014/12/08 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
微信小程序加载更多 点击查看更多
2016/11/29 Javascript
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
对numpy的array和python中自带的list之间相互转化详解
2018/04/13 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
农民入党思想汇报
2014/01/03 职场文书
员工培训邀请函
2014/01/11 职场文书
大学生入党自荐书
2015/03/05 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
golang 如何通过反射创建新对象
2021/04/28 Golang
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技