JS實(shí)現(xiàn)列表的響應(yīng)式排版(推薦)
先給大家展示下效果圖,如果感覺還不錯(cuò),請(qǐng)參考實(shí)現(xiàn)代碼。
一、每行固定個(gè)數(shù):保證排版的美觀
.list li{ width:20%;display:inline-block; *display:inline;*zoom:1;overflow:hidden; }
二、隨頁(yè)面寬度調(diào)整個(gè)數(shù)和大小:保證圖文的可讀性
.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()實(shí)時(shí)獲取瀏覽器的寬度
注意事項(xiàng):
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實(shí)現(xiàn)列表的響應(yīng)式排版,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
簡(jiǎn)單的js計(jì)算器實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了如何實(shí)現(xiàn)簡(jiǎn)單js計(jì)算器的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10js實(shí)現(xiàn)公告自動(dòng)滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)公告自動(dòng)滾動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05JS關(guān)于?replace?取值、替換第幾個(gè)匹配項(xiàng)問題小結(jié)
這篇文章主要介紹了JS關(guān)于replace取值、替換第幾個(gè)匹配項(xiàng),本文針對(duì)字符串的替換、截取知識(shí)點(diǎn)做詳細(xì)介紹,結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05Javascript對(duì)象Clone實(shí)例分析
這篇文章主要介紹了Javascript對(duì)象Clone用法,實(shí)例分析了javascript對(duì)象克隆的相關(guān)技巧,需要的朋友可以參考下2015-06-06為body標(biāo)簽和document.body都添加點(diǎn)擊事件后僅Firefox彈出了兩次
為body標(biāo)簽和document.body都添加點(diǎn)擊事件后僅Firefox彈出了兩次,需要的朋友可以參考下。2011-04-04JavaScript實(shí)現(xiàn)水印效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了JavaScript如何利用canvas實(shí)現(xiàn)添加水印的效果,文中的示例代碼簡(jiǎn)潔易懂,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-05-05JavaScript實(shí)現(xiàn)字符串轉(zhuǎn)JSON對(duì)象的4種方法代碼
這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)字符串轉(zhuǎn)JSON對(duì)象的4種方法,使用ajax的開發(fā)項(xiàng)目過程中,經(jīng)常需要將json格式的字符串返回到前端,前端解析成js對(duì)象(JSON),需要的朋友可以參考下2023-10-10