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实现列表的响应式排版，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

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

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

  • 在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

  • 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.媒体查询控制宽度

  • 使用Vue.js和MJML创建响应式电子邮件

    使用Vue.js和MJML创建响应式电子邮件

    MJML是一种现代的电子邮件工具,使开发人员可以在所有设备和邮件客户端上创建美观.响应迅速的出色电子邮件.这种标记语言是为了减少编写响应式电子邮件的痛苦而设计的. 它的语义语法使其易于使用.它还具有功能丰富的标准组件,可缩短开发时间.在本教程中,我们将使用MJML构建漂亮的响应式邮件,并在多个邮件客户端上进行测试. 开始MJML 你可以使用npm安装MJML,以将其与Node.js或CLI结合使用: $ npm install -g mjml 构建我们的电子邮件 首先,请创建一个名为 email

  • 一文详解Vue3响应式原理

    一文详解Vue3响应式原理

    目录 回顾 vue2.x 的响应式 vue3的响应式 Reflect 回顾 vue2.x 的响应式 实现原理: 对象类型:通过object.defineProperty()对属性的读取.修改进行拦截(数据劫持) 数组类型:通过重写更新数组的一系列方法来实现拦截(对数组的变更方法进行了包裹) Object.defineProperty(data,'count ",{ get(){}, set(){} }) 存在问题: 新增属性.删除属性,界面不会更新 直接通过下标修改数组,界面不会自动更新 但是

  • 详解vue3 响应式的实现原理

    目录 核心设计思想 Vue.js 2.x 响应式 Vue.js 3.x 响应式 依赖收集:get 函数 派发通知:set 函数 总结 源码参考 核心设计思想 除了组件化,Vue.js 另一个核心设计思想就是响应式.它的本质是当数据变化后会自动执行某个函数,映射到组件的实现就是,当数据变化后,会自动触发组件的重新渲染.响应式是 Vue.js 组件化更新渲染的一个核心机制. Vue.js 2.x 响应式 我们先来回顾一下 Vue.js 2.x 响应式实现的部分: 它在内部通过 Object.defi

  • Vue.js每天必学之内部响应式原理探究

    Vue.js每天必学之内部响应式原理探究

    深入响应式原理 大部分的基础内容我们已经讲到了,现在讲点底层内容.Vue.js 最显著的一个功能是响应系统 -- 模型只是普通对象,修改它则更新视图.这让状态管理非常简单且直观,不过理解它的原理也很重要,可以避免一些常见问题.下面我们开始深挖 Vue.js 响应系统的底层细节. 如何追踪变化 把一个普通对象传给 Vue 实例作为它的 data 选项,Vue.js 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter.这是 ES5 特性,不能打补丁

  • 使用Chart.js图表库制作漂亮的响应式表单

    入门基础 Chart.js是一个基于HTML5的开源图表库,可以方便简洁的绘制美观的图表. 主要特性包括: 1.支持6种不同的表格类型:曲线图.柱状图.饼状图.雷达图.极坐标区域图.环图. 2.基于HTML5开发,支持所有浏览器(包括IE7/8). 3.不依赖于其他任何库,仅有4.5k大小,并且可以进行定制. Chart.js 是一个基于 HTML5 canvas 的响应式.灵活的.轻量化的图表库.库中提供了六种不同的图表类型,每种类型都带有一系列的自定义选项.如果这些还不够,你还可以创造自己的

  • CSS3+Js实现响应式导航条

    CSS3+Js实现响应式导航条

    今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大量的篇幅介绍了,主要看一下这个导航条该怎么做. 另外需要提到的是,ie6-ie8是不支持CSS3的Media Query的,因此对于ie6-ie8我们需要特殊处理,就让他们保持默认样式,这对于布局及样式上都要考虑到这一点. 首先看一下布局这一块,html代码如下: 复制代码 代码如下: <div c

  • 基于cssSlidy.js插件实现响应式手机图片轮播效果

    基于cssSlidy.js插件实现响应式手机图片轮播效果

    cssSlidy是一款支持手机移动端的焦点图轮播插件,支持标题设置,滑动动画,间隔时间等. 在线实例 实例演示 使用方法 <div id="slidy-container"> <figure id="slidy"> <a href='#' target='_blank'><img src="img/2.jpg" alt="jQuery.nicescroll美化滚动条" data-cap

  • 8款非常棒的响应式jQuery 幻灯片插件推荐

    8款非常棒的响应式jQuery 幻灯片插件推荐

    这篇文章收集了8款优秀的响应式 jQuery 幻灯片插件,它们能够非常容易的集成到 Web 项目中.响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验. Flexslider FlexSlider 是一款非常棒的响应式 jQuery 幻灯片插件,能够自适应屏幕尺寸,呈现漂亮的外观. Blueberry Blueberry 是一款开源的 jQuery 图片幻灯片插件,适用于流体.响应式网页布局. unoslider 特别推

  • JS中使用media实现响应式布局

    JS中使用media实现响应式布局

    常见写法: 下面总结常见的响应式布局的分类: @media screen and (max-width:320px){ #talkFooter .editArea{-- } } @media screen and (min-width:321px) and (max-width:375px){ #talkFooter .editArea{-- } } @media screen and (min-width:376px) and (max-width:414px){ #talkFooter .e

随机推荐