JS實現(xiàn)列表的響應式排版(推薦)
更新時間：2016年09月01日 10:32:49 作者：乖乖臉很大
列表的響應式排版，首先每行固定好個數(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)列表的響應式排版，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
這篇文章主要為大家詳細介紹了如何實現(xiàn)簡單js計算器的方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了JS ES6變量的解構(gòu)賦值，對ES6感興趣的同學，可以參考下2021-05-05
這篇文章主要為大家詳細介紹了js實現(xiàn)公告自動滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
JS關于?replace?取值、替換第幾個匹配項問題小結(jié)
這篇文章主要介紹了JS關于replace取值、替換第幾個匹配項,本文針對字符串的替換、截取知識點做詳細介紹，結(jié)合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-05-05
這篇文章主要介紹了jQuery scrollFix滾動定位插件,當用戶向上或向下滾動頁面到一定位置時，目標元素開始固定定位（position:fixed），當回滾到原位置時目標元素恢復到原狀態(tài)，需要的朋友可以參考下2015-04-04
這篇文章主要介紹了Javascript對象Clone用法,實例分析了javascript對象克隆的相關技巧,需要的朋友可以參考下2015-06-06
為body標簽和document.body都添加點擊事件后僅Firefox彈出了兩次
為body標簽和document.body都添加點擊事件后僅Firefox彈出了兩次，需要的朋友可以參考下。2011-04-04
這篇文章主要為大家詳細介紹了JavaScript如何利用canvas實現(xiàn)添加水印的效果，文中的示例代碼簡潔易懂，感興趣的小伙伴可以跟隨小編一起學習一下2023-05-05
JavaScript實現(xiàn)字符串轉(zhuǎn)JSON對象的4種方法代碼
這篇文章主要給大家介紹了關于JavaScript實現(xiàn)字符串轉(zhuǎn)JSON對象的4種方法,使用ajax的開發(fā)項目過程中,經(jīng)常需要將json格式的字符串返回到前端,前端解析成js對象(JSON),需要的朋友可以參考下2023-10-10
這篇文章主要為大家介紹了從延遲處理解析JavaScript惰性編程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10