时间:2021-07-01 10:21:17 帮助过:11人阅读
先给大家展示下效果图,如果感觉还不错,请参考实现代码。
一、每行固定个数:保证排版的美观
- .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实现列表的响应式排版,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!