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