瀑布流這張頁面加載的圖片問題
后面加載是加載了，怎么后面效果還是原始的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
? ? ? *{
? ? ? ?margin: 0;
? ? ? ?padding: 0;
? ? ? }
? ? ? #main{
? ? ? ?position: relative;
? ? ? }
? ? ? .box{
? ? ? ?padding: 15px 0 0 15px;
? ? ? ?float: left;
? ? ? }
? ? ? .pic{
? ? ? ?padding: 10px;
? ? ? ?border: 1px solid #ccc;
? ? ? ?border-radius: 5px;
? ? ? ?box-shadow: 0 0 5px #ccc;
? ? ? }
? ? ? .pic img{
? ? ? ?width: 165px;
? ? ? ?height: auto;
? ? ? }
</style>
<script type="text/javascript">
? ? ?window.onload = function(){
? ? ? ? waterfall("main","box");
? ? ? ? //模擬一個json數(shù)據(jù)供加載
? ? ? ? var dataint = {"data":[{"src":'0.jpg'},{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'}]}
? ? ? ? window.onscroll = function(){
? ? ? ? ?if(checkScrollSlide){
? ? ? ? ?//將數(shù)據(jù)塊渲染到頁面的尾部
? ? ? ? ?var oparent = document.getElementById("main");
? ? ? ? ?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');
? ? ? ? ?obox.className = 'pic';
? ? ? ? ? ? ? ? ? ? obox.appendChild(opic);
? ? ? ? ? ? ? ? ? ? var oimg = document.createElement('img');
? ? ? ? ? ? ? ? ? ? oimg.src = "images/"+dataint.data[i].src;
? ? ? ? ? ? ? ? ? ? opic.appendChild(oimg);
? ? ? ? ?}
? ? ? ? ? ?waterfall("main","box");
? ? ? ? ? ??
? ? ? ? ?}
? ? ? ? }
? ? ?}
? ? ?//檢測是否具備了數(shù)據(jù)加載的條件
? ? ?function checkScrollSlide(){
? ? ? ? var oparent = document.getElementById("main");
? ? ? ? var oboxs = getByClass(oparent,"box");
? ? ? ? var lastBoxh = oboxs[oboxs.length-1].offsetTop+Math.floor( oboxs[oboxs.length-1].offsetHeight/2);
? ? ? ? var scrolltop = document.body.scrollTop||document.documentElement.scrollTop;
? ? ? ? var height = document.body.clientHeight||document.documentElement.clientHeight;
? ? ? ? return (lastBoxh<scrolltop+height)?true:false;
? ? ?}
? ? ?function waterfall(parent,box){
? ? ? var oparent = document.getElementById(parent);
? ? ? var oboxs = getByClass(oparent,box);
? ? ? ? //計算整個頁面的列數(shù)
? ? ? ? var oboxW = oboxs[0].offsetWidth;
? ? ? ? var windowWith = document.documentElement.clientWidth;
? ? ? ? var cols = Math.floor(windowWith/oboxW);
? ? ? ? //設置main寬度并居中
? ? ? ? oparent.style.cssText = 'width:'+oboxW*cols+'px;margin:0 auto';
? ? ? ? //存放每一列高度的數(shù)組
? ? ? ? var hArr = new Array();
? ? ? ? for (var i = 0; i < oboxs.length; i++) {
? ? ? ? ?if(i<cols){
? ? ? ? ?hArr.push(oboxs[i].offsetHeight);
? ? ? ? ?}else{
? ? ? ? ?var Minh = Math.min.apply(null,hArr);
? ? ? ? ? ? ?var index = getMinIndex(hArr,Minh);
? ? ? ? ? ? ? ? oboxs[i].style.position = "absolute";
? ? ? ? ? ? ? ? oboxs[i].style.top = Minh+'px';
? ? ? ? ? ? ? ? oboxs[i].style.left = oboxs[index].offsetLeft+'px';
? ? ? ? ? ? ? ? hArr[index]+=oboxs[i].offsetHeight;
? ? ? ? ?}
? ? ? ? };
? ? ?}
? ? ?//獲取最小高度的索引
? ? ?function getMinIndex(hArr,Minh){
? ? ? for (var i = 0; i < hArr.length; i++) {
? ? ? var index;
? ? ? if(hArr[i]==Minh){
? ? ? ? ? ? ? ?index=i;
? ? ? }
? ? ? }
? ? ? return index;
? ? ?}
? ? ?//根據(jù)class獲取同元素
? ? ?function getByClass(parent,cls){
? ? ? ?var boxArray = new Array(),
? ? ? ? ? oElements = parent.getElementsByTagName("*");
? ? ? ? for(var i=0;i<oElements.length;i++){
? ? ? ? ?if(oElements[i].className==cls){
? ? ? ? ?boxArray.push(oElements[i]);
? ? ? ? ?}
? ? ? ? }
? ? ? ?return boxArray;
? ? ?}
</script>
</head>
<body>
<div id="main">
<div>
<div>
<img src="images/0.jpg">
</div>
</div>
? ? ? ? <div>
<div>
<img src="images/1.jpg">
</div>
</div>
<div>
<div>
<img src="images/2.jpg">
</div>
</div>
<div>
<div>
<img src="images/3.jpg">
</div>
</div>
<div>
<div>
<img src="images/4.jpg">
</div>
</div>
<div>
<div>
<img src="images/5.jpg">
</div>
</div>
<div>
<div>
<img src="images/6.jpg">
</div>
</div>
<div>
<div>
<img src="images/7.jpg">
</div>
</div>
<div>
<div>
<img src="images/8.jpg">
</div>
</div>
<div>
<div>
<img src="images/9.jpg">
</div>
</div>
<div>
<div>
<img src="images/10.jpg">
</div>
</div>
<div>
<div>
<img src="images/11.jpg">
</div>
</div>
<div>
<div>
<img src="images/12.jpg">
</div>
</div>
<div>
<div>
<img src="images/13.jpg">
</div>
</div>
<div>
<div>
<img src="images/14.jpg">
</div>
</div>
<div>
<div>
<img src="images/15.jpg">
</div>
</div>
<div>
<div>
<img src="images/16.jpg">
</div>
</div>
<div>
<div>
<img src="images/17.jpg">
</div>
</div>
<div>
<div>
<img src="images/18.jpg">
</div>
</div>
<div>
<div>
<img src="images/19.jpg">
</div>
</div>
<div>
<div>
<img src="images/20.jpg">
</div>
</div>
<div>
<div>
<img src="images/21.jpg">
</div>
</div>
<div>
<div>
<img src="images/22.jpg">
</div>
</div>
<div>
<div>
<img src="images/23.jpg">
</div>
</div>
<div>
<div>
<img src="images/24.jpg">
</div>
</div>
<div>
<div>
<img src="images/0.jpg">
</div>
</div>
? ? ? ? <div>
<div>
<img src="images/1.jpg">
</div>
</div>
<div>
<div>
<img src="images/2.jpg">
</div>
</div>
<div>
<div>
<img src="images/3.jpg">
</div>
</div>
<div>
<div>
<img src="images/4.jpg">
</div>
</div>
<div>
<div>
<img src="images/5.jpg">
</div>
</div>
<div>
<div>
<img src="images/6.jpg">
</div>
</div>
<div>
<div>
<img src="images/7.jpg">
</div>
</div>
<div>
<div>
<img src="images/8.jpg">
</div>
</div>
<div>
<div>
<img src="images/9.jpg">
</div>
</div>
<div>
<div>
<img src="images/10.jpg">
</div>
</div>
<div>
<div>
<img src="images/11.jpg">
</div>
</div>
<div>
<div>
<img src="images/12.jpg">
</div>
</div>
<div>
<div>
<img src="images/13.jpg">
</div>
</div>
<div>
<div>
<img src="images/14.jpg">
</div>
</div>
<div>
<div>
<img src="images/15.jpg">
</div>
</div>
<div>
<div>
<img src="images/16.jpg">
</div>
</div>
<div>
<div>
<img src="images/17.jpg">
</div>
</div>
<div>
<div>
<img src="images/18.jpg">
</div>
</div>
<div>
<div>
<img src="images/19.jpg">
</div>
</div>
<div>
<div>
<img src="images/20.jpg">
</div>
</div>
<div>
<div>
<img src="images/21.jpg">
</div>
</div>
<div>
<div>
<img src="images/22.jpg">
</div>
</div>
<div>
<div>
<img src="images/23.jpg">
</div>
</div>
<div>
<div>
<img src="images/24.jpg">
</div>
</div>
</div>
</body>
</html>
2017-03-27
main里邊的子div沒有定義類名box，在調用waterfall函數(shù)時傳入的第二個參數(shù)box是不存在的，所以沒有效果，而且main里邊的后代元素也沒有定義類名，樣式效果也沒有