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 相关文章推荐
一个可拖拽列宽表格实例演示
Nov 26 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
Javascript:为input设置readOnly属性(示例讲解)
Dec 25 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
Sep 04 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
Mar 05 Javascript
jQueryUI Datepicker组件设置日期高亮
Oct 13 Javascript
使用jQuery操作DOM的方法小结
Feb 27 Javascript
JS原生带缩略图的图片切换效果
Oct 10 Javascript
Windows下Node爬虫神器Puppeteer安装记
Jan 09 Javascript
JavaScript中Dom操作实例详解
Jul 08 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
Aug 09 Javascript
一篇文章学会Vue中间件管道
Jun 20 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中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
PHP多态代码实例
2015/06/26 PHP
网页javascript精华代码集
2007/01/24 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
js/jquery判断浏览器类型的方法小结
2015/05/12 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
JavaScript用JSONP跨域请求数据实例详解
2017/01/06 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
vue.js获取数据库数据实例代码
2017/05/26 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
基于Swiper实现移动端页面图片轮播效果
2017/12/28 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
浏览器事件循环与vue nextTicket的实现
2019/04/16 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
2019/05/12 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
python多线程扫描端口示例
2014/01/16 Python
Python continue语句用法实例
2014/03/11 Python
Python算法应用实战之队列详解
2017/02/04 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
Python计算公交发车时间的完整代码
2020/02/12 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
幼儿园开学寄语
2014/04/03 职场文书
超越自我演讲稿
2014/05/21 职场文书
旅游节目策划方案
2014/05/26 职场文书
经济贸易系毕业生求职信
2014/05/31 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
导游词之五台山
2019/10/11 职场文书