javascript實現(xiàn)瀑布流自適應(yīng)遇到的問題及解決方案
更新時間：2015年01月28日 16:42:02 投稿：hebedich
這篇文章主要介紹了javascript實現(xiàn)瀑布流自適應(yīng)遇到的問題及解決方案,需要的朋友可以參考下
這幾天看了Amy老師的用javascript實現(xiàn)瀑布流，我跟著把代碼敲出來。發(fā)現(xiàn)這樣寫只能第一次載入時適應(yīng)屏幕，以后改變窗口大小就不能做到自適應(yīng)了。
于是我想到了用window.onresize來使得瀑布流函數(shù)從新加載來達到目的，
復(fù)制代碼 代碼如下:
window.onload=function(){
//瀑布流函數(shù)
waterfall('content','box');
//模擬數(shù)據(jù)加載
var dataInt = {"data":[{"src":"01.jpg"},{"src":"02.jpg"},{"src":"03.jpg"},{"src":"04.jpg"},{"src":"05.jpg"},{"src":"06.jpg"},{"src":"07.jpg"}]}
//當(dāng)屏幕大小改變時從新執(zhí)行瀑布流函數(shù) 達到從新適應(yīng)的作用
window.onresize=function(){
// waterfall('content','box');
setTimeout(function() {waterfall('content','box');}, 200);
}
window.onscroll=function(){
if(checkScroll()){
var oparent = document.getElementById('content');
//將熏染的數(shù)據(jù)添加入html中
for(var i=0;i<dataInt.data.length;i++){
var obox = document.createElement("div");
obox.className = "box";
oparent.appendChild(obox);
var opic = document.createElement("div");
opic.className = "pic";
obox.appendChild(opic);
var oImg = document.createElement("img");
oImg.src="img/"+dataInt.data[i].src;
opic.appendChild(oImg);
}
waterfall('content','box');
}
}
}
當(dāng)屏幕縮小時是可以的，但是從縮小的放大就出現(xiàn)了BUG
看沒看到后面幾列的頂部回不來了，
于是我打開開發(fā)工具看是怎么回事，
第3 4 5個div中不應(yīng)該有style,是因為縮小的時候給他添加上去的，而放大了他沒有清除所以保留下來了就會出現(xiàn)這個樣子于是：我在瀑布流函數(shù)里加了句aBox[i].style.cssText ='';使得每次進來都清空style
復(fù)制代碼 代碼如下:
function waterfall(parent,box){
//將content下所有class box取出來
var aParent = document.getElementById(parent);
var aBox = getBclass(aParent,box);
//獲取盒子的寬度
var aBoxW = aBox[0].offsetWidth;
//用瀏覽器的可是寬度除以box寬度 得到列數(shù)
var cols = Math.floor(document.documentElement.clientWidth/aBoxW);
//設(shè)定 content的寬度 和居中
aParent.style.cssText = 'width:'+aBoxW*cols+'px;height:auto;position: relative; margin:0 auto;padding-right:15px';
//創(chuàng)建每一列的高度數(shù)組
var hArr=[];
for(var i=0; i<aBox.length;i++){
aBox[i].style.cssText ='';
if(i<cols){
hArr.push(aBox[i].offsetHeight);
}else{
var minH = Math.min.apply(null,hArr);
var index = getMinIndex(hArr,minH); //找出高最矮的 索引值
//console.log(aBoxW);
aBox[i].style.position = 'absolute';
aBox[i].style.top = minH+'px';
aBox[i].style.left = aBoxW*index+'px';
hArr[index]+=aBox[i].offsetHeight;
}
}
}
這樣就解決了縮小后回不來的BUG，可以正常自適應(yīng)了
最后我把整個的javascript 貼出來
復(fù)制代碼 代碼如下:
window.onload=function(){
//瀑布流函數(shù)
waterfall('content','box');
//模擬數(shù)據(jù)加載
var dataInt = {"data":[{"src":"01.jpg"},{"src":"02.jpg"},{"src":"03.jpg"},{"src":"04.jpg"},{"src":"05.jpg"},{"src":"06.jpg"},{"src":"07.jpg"}]}
//當(dāng)屏幕大小改變時從新執(zhí)行瀑布流函數(shù) 達到從新適應(yīng)的作用
window.onresize=function(){
// waterfall('content','box');
setTimeout(function() {waterfall('content','box');}, 200);
}
window.onscroll=function(){
if(checkScroll()){
var oparent = document.getElementById('content');
//將熏染的數(shù)據(jù)添加入html中
for(var i=0;i<dataInt.data.length;i++){
var obox = document.createElement("div");
obox.className = "box";
oparent.appendChild(obox);
var opic = document.createElement("div");
opic.className = "pic";
obox.appendChild(opic);
var oImg = document.createElement("img");
oImg.src="img/"+dataInt.data[i].src;
opic.appendChild(oImg);
}
waterfall('content','box');
}
}
}
function waterfall(parent,box){
//將content下所有class box取出來
var aParent = document.getElementById(parent);
var aBox = getBclass(aParent,box);
//獲取盒子的寬度
var aBoxW = aBox[0].offsetWidth;
//用瀏覽器的可是寬度除以box寬度 得到列數(shù)
var cols = Math.floor(document.documentElement.clientWidth/aBoxW);
//設(shè)定 content的寬度 和居中
aParent.style.cssText = 'width:'+aBoxW*cols+'px;height:auto;position: relative; margin:0 auto;padding-right:15px';
//創(chuàng)建每一列的高度數(shù)組
var hArr=[];
for(var i=0; i<aBox.length;i++){
aBox[i].style.cssText ='';
if(i<cols){
hArr.push(aBox[i].offsetHeight);
}else{
var minH = Math.min.apply(null,hArr);
var index = getMinIndex(hArr,minH); //找出高最矮的 索引值
//console.log(aBoxW);
aBox[i].style.position = 'absolute';
aBox[i].style.top = minH+'px';
aBox[i].style.left = aBoxW*index+'px';
hArr[index]+=aBox[i].offsetHeight;
}
}
}
//根據(jù)class獲取到元素
function getBclass(parent,className){
var boxarr = new Array(); //用來存儲獲取到的class
//console.log(parent.prototype);
allElement=parent.getElementsByTagName('*');
for(var i=0;i<allElement.length;i++){
if(allElement[i].className == className){
boxarr.push(allElement[i]);
}
}
return boxarr;
}
//找出高最矮的 索引值
function getMinIndex(arr,value){
for(var i in arr){
if (arr[i]==value){
return i;
}
}
}
//建立一個檢測輪輪滑動是否成立的函數(shù) 返回真假
function checkScroll(){
var oparent = document.getElementById("content");
var oBox = getBclass(oparent,'box');
var lastoBoxTop = oBox[oBox.length-1].offsetTop+Math.floor(oBox[oBox.length-1].offsetHeight/2);
//console.log(lastoBoxTop);
var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
var height = document.body.clientHeight||document.documentElement.clientHeight;
//console.log(scrollTop);
return(lastoBoxTop<scrollTop+height)?true:false;
}
css文件貼出來
復(fù)制代碼 代碼如下:
*{margin: 0;padding: 0;}
body{background-color: #eee;}
.content{
position: relative;
}
.box{
padding: 15px 0 0 15px;
float: left;
}
.pic{
padding: 10px;
border: 1px solid #ccc;
box-shadow: 0 0 5px #CCCCCC;
border-radius: 5px;
background: #fff;
}
.pic img{
width: 220px;
height: auto;
border: 1px solid #eee;
}
html文件貼出來
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>javascript瀑布流</title>
<link rel="stylesheet" type="text/css" href="css/pubuli.css"/>
<script type="text/javascript" src="js/my.js" ></script>
</head>
<body>
<div id="content">
<div class="box">
<div class="pic">
<img src="img/01.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/02.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/03.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/04.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/05.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/06.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/07.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/08.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/09.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/10.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/11.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/12.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/13.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/14.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/15.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/16.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/17.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/18.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/19.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/20.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/21.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/22.jpg"/>
</div>
</div>
</div>
</body>
</html>
好了謝謝大家觀看，以前沒寫過技術(shù)分享類文章，有很多不周到的地方希望大家能多多指正。學(xué)習(xí)前端的小菜鳥敬上Y(^_^)Y
相關(guān)文章
這篇文章主要介紹了JS利用時間戳倒計時的實現(xiàn)示例,本文將提供代碼示例和詳細(xì)的步驟,幫助你實現(xiàn)一個簡單而實用的時間戳倒計時,感興趣的可以了解一下2023-12-12
這篇文章主要介紹了JavaScript日期庫date-fn.js使用方法解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-09-09
使用JavaScript判斷用戶輸入的是否為正整數(shù)(兩種方法)
在項目開發(fā)中，需要使用JavaScript驗證用戶輸入的是否為正整數(shù)，下面小編給大家分享兩種方法，需要的朋友參考下2017-02-02
js中的面向?qū)ο笾畬ο蟪Ｒ妱?chuàng)建方法詳解
這篇文章主要介紹了js中的面向?qū)ο笾畬ο蟪Ｒ妱?chuàng)建方法,結(jié)合實例形式較為詳細(xì)的分析了JavaScript創(chuàng)建對象的四種常用方式,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了JS擴展方法,實例分析了javascript擴展方法的原理與各種常用的擴展應(yīng)用技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
由于各瀏覽器的js實現(xiàn)不同，因此各瀏覽器的原生對象（這里不涉及DOM實現(xiàn)，當(dāng)然這也有區(qū)別）的原生方法也不盡相同，采用原生方法的好處顯而易見，使用兼有效率，而且其中有些方法可能包含在以后的ECMAscript規(guī)范中2011-11-11
關(guān)于Javascript，大家肯定都很熟悉啦，對于有編程經(jīng)驗的朋友來說，Javascript很快就能上手，不過關(guān)于JS的變量作用域，還是有一點差別的。2010-03-03
這篇文章主要介紹了Javascript點擊按鈕隨機改變數(shù)字和其字體的顏色，實現(xiàn)后的效果很不錯，具有一定的參考價值，有需要的可以參考借鑒，下面來一起看看。2016-09-09
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_
這篇文章主要介紹了微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}，非常具有實用價值，需要的朋友可以參考下2018-10-10
這篇文章主要介紹了JS獲取文件大小的方法,結(jié)合實例總結(jié)分析了JavaScript獲取文件大小的常用技巧,并給出了判斷文件格式與大小的完整實例供讀者參考,需要的朋友可以參考下2015-12-12