Responsive layout of JS implementation list (recommended)

Let me show you the renderings first. If you feel it is pretty good, please refer to the implementation code.

1. Fixed number per line: Ensure the aesthetics of the layout

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

2. Adjust the number and size according to the page width: Ensure the readability of pictures and texts

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

1. Media query control width

 @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%}}

Convenient, but compatible

2. JS control

 $(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() gets the browser's width in real time

Notes:

1. The picture does not deform

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

2. Text overflow processing

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

The above is the responsive layout of the JS implementation list introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!