当前位置:Gxlcms > JavaScript > JS实现列表的响应式排版(推荐)

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

时间:2021-07-01 10:21:17 帮助过:11人阅读

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

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

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

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

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

1、媒体查询控制宽度

  1. @media screen and (max-width:1280px){
  2. .list-table1 li{width:25%}
  3. }
  4. @media screen and (max-width:600px){
  5. .list-table1 li{width:33.3%}
  6. }
  7. @media screen and (max-width:400px){
  8. .list-table1 li{width:50%}
  9. }

方便、但存在兼容性

2、JS控制

  1. $(window).resize(function () {
  2. resizeList();
  3. })
  4. function resizeList(){
  5. var s_width=$(window).width();
  6. //console.log("s_width:"+s_width);
  7. if(s_width>600 && s_width <=1280)
  8. {
  9. $(".list-table1 li").css("width","25%");
  10. }else if(s_width>400 && s_width <=600){
  11. $(".list-table1 li").css("width","33.3%");
  12. }else if(s_width>200 && s_width <=400){
  13. $(".list-table1 li").css("width","50%");
  14. }else if(s_width<=200){
  15. $(".list-table1 li").css("width","100%");
  16. }
  17. }
  18. $(window).resize()实时获取浏览器的宽度

注意事项:

1、图片不变形

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

2、文字溢出处理

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

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

人气教程排行