这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
列表的响应式排版,首先每行固定好个数,然后随页面宽度调整个数和大小,保证图片的的可读性及美观。接下来小编给大家带来实现思路介绍,一起看看吧
先给大家展示下效果图,如果感觉还不错,请参考实现代码。
一、每行固定个数:保证排版的美观
- .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 实现列表的响应式排版,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0707/332196.html