2 u011154580 u011154580 于 2016.09.26 23:45 提问

程序没有报错,但是为什么就是不对呢?(注释的不用管)
 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> -->
<!-- <script type="text/javascript" src="./jquery.js"></script> -->
<script type="text/javascript" src="./index.js"></script>
<title></title>
<style type="text/css">
    *{padding: 0;margin:0;}
    #main{
        position: relative;
    }
    .box{
        padding: 15px 0 0 15px;
        float:left;
    }
    .pic{
        padding: 10px;
        boxrder:1px solid #ccc;
        pic-shadow: 0 0 6px #ccc;
        boxrder-radius: 5px;
    }
    .pic img{
        width:162px;
        height:auto;
    }
</style>
<!-- <link rel="stylesheet" type="text/css" href="./css3.css"> -->
</head>
<body>
<div id="main">
    <div class="box">
        <div class="pic">
            <img src="./javascript/images/1.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./javascript/images/2.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./javascript/images/3.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./javascript/images/4.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./javascript/images/5.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./javascript/images/6.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./javascript/images/7.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./javascript/images/8.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./javascript/images/9.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./javascript/images/10.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./javascript/images/11.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./javascript/images/12.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./javascript/images/13.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./javascript/images/14.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./javascript/images/15.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./javascript/images/16.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./javascript/images/17.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./javascript/images/18.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./javascript/images/19.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./javascript/images/20.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./javascript/images/21.jpg"/>
        </div>
    </div>
</div>
</boxdy>
</html>
//
window.onload=function(){
    waterfall('main','box');
    // var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
    // window.onscroll=function(){
    //  if(checkScrollSlide){
    //      //加载后台数据
    //      var oParent = document.getElementById('main');// 父级对象
 //            for(var i=0;i<dataInt.data.length;i++){
 //                var oPin=document.createElement('div'); //添加 元素节点
 //                oPin.className='box';                   //添加 类名 name属性
 //                oParent.appendChild(oPin);              //添加 子节点
 //                var oBox=document.createElement('div');
 //                oBox.className='pic';
 //                oPin.appendChild(oBox);
 //                var oImg=document.createElement('img');
 //                oImg.src='./images/'+dataInt.data[i].src;
 //                oBox.appendChild(oImg);
 //            }
 //            waterfall('main','pin');
    //  }
    // }
}
function waterfall(parent,box){
    //取到所有box
    var oParent=document.getElementById(parent);
    var oBoxs=getClass(oParent,box);
    //计算列数
    var oBoxW=oBoxs[0].offsetWidth;
    var cols=Math.floor(document.documentElement.clientWidth/oBoxW);
    //设置main宽
    oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto';
    var hArr=[];
    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.postion='absolute';
            oBoxs[i].style.top=minH+'px';
            oBoxs[i].style.left=oBoxs[index].offsetLeft+'px';
            hArr[index]+=oBoxs[i].offsetHeight;
        }
    }
}
function getClass(parent,className){
    var boxArr=[];//存储所有box
     oElements=parent.getElementsByTagName('*');
     for(var i=0;i<oElements.length;i++){
        if (oElements[i].className==className) {
            boxArr.push(oElements[i]);
        }
     }
     return boxArr;
}
function getminIndex(arr,val){
    for(var i in arr){
        if(arr[i]==val){
            return i;
        }
    }
}
//检测是否具备滚动加载数据块条件
// function checkScrollSlide(){
//  var oParent=document.getElementById('main');
//  var oBoxs=getClass(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;
// }

2个回答

qq_35718410
qq_35718410   2016.09.27 09:01

你这粘的有点乱啊。。。

u011154580
u011154580 尔,刚开始用csdn,不太熟悉
大约一年之前 回复
showbo
showbo   Ds   Rxr 2016.09.27 21:56

if(checkScrollSlide){

==>你都没执行函数,直接if(函数名称)肯定永远是true的了,其他代码自己检查错误

if(checkScrollSlide()){

showbo
showbo 回复哟西哟西: 你的box又不是absolute,relative定位,设置left/top没有效果。。自己看别人瀑布流怎么写的:http://www.w3dev.cn/article/20150112/jquery-waterfall-asp.net-read-data-demo.aspx
大约一年之前 回复
u011154580
u011154580 那个注释掉了啊,大哥,都说了注释部分不用看的
大约一年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片