JS實(shí)現(xiàn)列表的響應(yīng)式排版(推薦)
更新時(shí)間：2016年09月01日 10:32:49 作者：乖乖臉很大
列表的響應(yīng)式排版，首先每行固定好個(gè)數(shù)，然后隨頁(yè)面寬度調(diào)整個(gè)數(shù)和大小，保證圖片的的可讀性及美觀。接下來小編給大家?guī)韺?shí)現(xiàn)思路介紹，一起看看吧
先給大家展示下效果圖，如果感覺還不錯(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)文章
Swiper.js插件超簡(jiǎn)單實(shí)現(xiàn)輪播圖
這篇文章主要介紹了Swiper.js插件超簡(jiǎn)單實(shí)現(xiàn)輪播圖，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
原生js實(shí)現(xiàn)簡(jiǎn)易計(jì)算器
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)簡(jiǎn)易計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
簡(jiǎn)單的js計(jì)算器實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了如何實(shí)現(xiàn)簡(jiǎn)單js計(jì)算器的方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
js 通過cookie實(shí)現(xiàn)刷新不變化樹形菜單
通過設(shè)置cookie來保存樹形菜單的狀態(tài)，在頁(yè)面加載時(shí)重新讀取cookie來設(shè)置菜單2014-10-10
Map是ES6中新增的數(shù)據(jù)結(jié)構(gòu),Map類似于對(duì)象,但普通對(duì)象的 key 必須是字符串或者數(shù)字,而 Map 的 key 可以是任何數(shù)據(jù)類型,這篇文章主要給大家介紹了關(guān)于ECMAScript6中Map映射的基本概念與常用方法,需要的朋友可以參考下2021-07-07
按鈕組和下拉菜單組件一樣，需要依賴于button.js插件才能正常運(yùn)作。通過本文給大家詳細(xì)介紹Bootstrap按鈕組件，感興趣的朋友一起學(xué)習(xí)吧2016-04-04
js/jquery遍歷對(duì)象和數(shù)組的方法分析【forEach，map與each方法】
這篇文章主要介紹了js/jquery遍歷對(duì)象和數(shù)組的方法,結(jié)合實(shí)例形式分析了數(shù)組遍歷的forEach，map與each方法常見使用技巧,需要的朋友可以參考下2019-02-02
使用 js 簡(jiǎn)單的實(shí)現(xiàn) bind、call 、aplly代碼實(shí)例
這篇文章主要介紹了使用 js 簡(jiǎn)單的實(shí)現(xiàn) bind、call 、aplly代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)字母索引菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript使用高階生成器進(jìn)行過濾以生成素?cái)?shù)
生成器大家都知道是怎么一回事,但是高階生成器又是什么東西呢,下面小編就來為大家簡(jiǎn)單介紹一下如何使用高階生成器進(jìn)行過濾以生成素?cái)?shù)吧2024-02-02