问答详情
源自：2-4 JavaScript实现瀑布流布局中图片排序

为什么我按老师说的做没做出来效果，求大神指教

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<link type="text/css" href="css/main.css" rel="stylesheet"  />

<script type="text/jscript" src="js/script.js"></script>

</head>


<body>

<div id="main">

      <div class="box">

           <div class="pic">

              <img  src="images/1.jpg"/>

           </div>

      </div>

      <div class="box">

           <div class="pic">

              <img  src="images/2.jpg" />

           </div>

      </div

      ><div class="box">

           <div class="pic">

              <img  src="images/3.jpg" />

           </div>

      </div>

      <div class="box">

           <div class="pic">

              <img  src="images/4.jpg" />

           </div>

      </div

      ><div class="box">

           <div class="pic">

              <img  src="images/5.jpg" />

           </div>

      </div>

      <div class="box">

           <div class="pic">

              <img  src="images/6.jpg" />

           </div>

      </div>

      <div class="box">

           <div class="pic">

              <img  src="images/7.jpg" />

           </div>

      </div>

      <div class="box">

           <div class="pic">

              <img  src="images/8.jpg" />

           </div>

      </div>

      <div class="box">

           <div class="pic">

              <img  src="images/9.jpg" />

           </div>

      </div>

      <div class="box">

           <div class="pic">

              <img  src="images/10.jpg" />

           </div>

      </div>

      <div class="box">

           <div class="pic">

              <img  src="images/11.jpg" />

           </div>

      </div>

      <div class="box">

           <div class="pic">

              <img  src="images/12.jpg" />

           </div>

      </div>

</div>

</body>

</html>

@charset "utf-8";

/* CSS Document */

* {

margin:0;

padding:0;

}

#main{

margin:0 auto;

position:relative;

}

.box { 

padding:15px 0 0 15px;

float:left;


}

.pic {

border:1px solid #ccc;

box-shadow:0 0 5px;

border-radius:5px;

padding:10px;

}

.pic img{

width:165px;

height:auto;

}

// JavaScript Document

window.onload=function(){

waterFall('main','box');

}

function waterFall(parent,box){

//将main下的所有box类取出来

var oParent=document.getElementById(parent);

var num=getByClass(oParent,box);

//计算整个页面显示的列数

var oBoxW=num[0].offsetWidth;

var cols=Math.floor(document.documentElement.clientWidth/oBoxW);

oParent.style.cssText="width:"+oBoxW*cols+"px;margin:0 auto;";

//存放每一列的高度

var harr=[];

for(var i=0;i<num.length;i++){

if(i<cols){

harr.push(num[i].offsetHeight);

}

else{

var minh=Math.min.apply(null,harr); //求每一列图片的最小高度

var index=getMinhIndex(harr,minh);

num[i].style.position='absolute';

num[i].style.top=minh+'px';

//num[i].style.left=oBoxW*index+'px';

num[i].style.left=num[index].offsetLeft+'px';

harr[index]+=num[i].offsetHeight;

}

}

}

//根据class获取元素

function getByClass(parent,claNam){

var oBox=new Array(); //用来存取获取到的class为box的类

var oElements=parent.getElementsByTagName('*');

for(var i=0; i<oElements.length;i++){

if(oElements[i].className==claNam){

oBox.push(oElements[i]);

}

return oBox;

}

}

function getMinhIndex(arr,val){

for(var i in arr){

if(arr[i]==val){

return i;

}

}

}


提问者：xiao55555 2015-12-10 20:33

个回答

  • 李晓健
    2015-12-10 21:08:05

    <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        #main{
            margin:0 auto;
            position:relative;
        }
        .box {
            padding:15px 0 0 15px;
            float:left;

        }
        .pic {
            border:1px solid #ccc;
            box-shadow:0 0 5px;
            border-radius:5px;
            padding:10px;
        }
        .pic img{
            width:165px;
            height:auto;
        }
    </style>
    <script>
        window.onload=function(){
            waterFall('main','box');
        }
        function waterFall(parent,box){
//将main下的所有box类取出来
            var oParent=document.getElementById(parent);
            var num=getByClass(oParent,box);
//计算整个页面显示的列数
            var oBoxW=num[0].offsetWidth;
            var cols=Math.floor(document.documentElement.clientWidth/oBoxW);
            oParent.style.cssText="width:"+oBoxW*cols+"px;margin:0 auto;";
//存放每一列的高度
            var harr=[];
            for(var i=0;i<num.length;i++){
                if(i<cols){
                    harr.push(num[i].offsetHeight);
                }else{
                    var minh=Math.min.apply(null,harr); //求每一列图片的最小高度
                    var index=getMinhIndex(harr,minh);
                    num[i].style.position='absolute';
                    num[i].style.top=minh+'px';
//num[i].style.left=oBoxW*index+'px';
                    num[i].style.left=num[index].offsetLeft+'px';
                    harr[index]+=num[i].offsetHeight;
                }
            }
        }
        //根据class获取元素
        function getByClass(parent,claNam){
            var oBox=new Array(); //用来存取获取到的class为box的类
            var oElements=parent.getElementsByTagName('*');
            for(var i=0; i<oElements.length;i++){
                if(oElements[i].className==claNam){
                    oBox.push(oElements[i]);
                }
            }
            return oBox;
        }
        function getMinhIndex(arr,val){
            for(var i in arr){
                if(arr[i]==val){
                    return i;
                }
            }
        }
    </script>
</head>

<body>
<div id="main">
    <div class="box">
        <div class="pic">
            <img  src="http://img.mukewang.com/5668dc790001aa2b06000338-240-132.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img  src="http://img.mukewang.com/5668dc790001aa2b06000338-240-135.jpg" />
        </div>
    </div
    ><div class="box">
    <div class="pic">
        <img  src="http://img.mukewang.com/5668dc790001aa2b06000338-240-135.jpg" />
    </div>
</div>
    <div class="box">
        <div class="pic">
            <img  src="http://img.mukewang.com/5668dc790001aa2b06000338-240-135.jpg" />
        </div>
    </div
    ><div class="box">
    <div class="pic">
        <img  src="http://img.mukewang.com/5668dc790001aa2b06000338-240-134.jpg" />
    </div>
</div>
    <div class="box">
        <div class="pic">
            <img  src="http://img.mukewang.com/5668dc790001aa2b06000338-240-135.jpg" />
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img  src="http://img.mukewang.com/5668dc790001aa2b06000338-240-132.jpg" />
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img  src="http://img.mukewang.com/5668dc790001aa2b06000338-240-135.jpg" />
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img  src="http://img.mukewang.com/5668dc790001aa2b06000338-240-135.jpg" />
        </div>
    </div>
</div>
</body>
</html>


    0