南大软院大神养成计划第二十天

最新推荐文章于 2024-10-08 01:30:55 发布

jx370

最新推荐文章于 2024-10-08 01:30:55 发布

阅读量499

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/jx370/article/details/50187783

练习的代码，贴上来，乱乱的

<!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=gb2312"

/>
<title>网页</title>
</head>
<style type="text/css">
<!--
*{
margin:0;
padding:0;
}
body{
font-family:"楷体";
font-size:37px;
background:#FFCCFF;
text-align:center;
}/*设置页面所有参数*/
.bigbox{
margin:0 auto;

}/*设置最大盒子的参数，居中*/
.top{
background-color:#6633FF;
font-size:20px;
margin-bottom:10px;
text-align:center;
}/*设置头部信息*/
.center{

margin-bottom:10px;
}
.box1{
width:200px;
background-color:#009900;
font-size:20px;
float:left;

}
.box2{

background-position:center;
background-repeat:no-repeat;
float:left;
margin:0 5px;
}

.footer{
background-color:#0000FF;
clear:both;
text-align:center;
color:#CCCCCC;
}

a{font-family:"楷体";}

.box1 a:hover{color:#00FF00;font-size:14px;}
.box1 a:hover img{width:200px;height:200px}
ul{list-style:none;height:70px;border-bottom:5px solid

purple;padding-left:30px;}
ul li{float:left;margin-top:20px;}
ul li a{display:block;background-color:#999;text-indent:20px;line-

height:50px;height:50px;margin-bottom:1px; text-decoration:none;}
ul li a:hover{background-color:purple;color:#fff;padding:10px

45px;margin-top:-20px;}

ol li{ list-style-type:none;padding:50px;}
-->
</style>
<body>
<div class="bigbox">
     <div class="top">
<ul>
     <li><a href="#">首    页</a></li>
  <li><a href="Untitled-3.html">商品信息</a></li>
  <li><a href="#">招商求资</a></li>
  <li><a href="#">论坛交流</a></li>
  <li><a href="#">我的兜兜</a></li>
  <li><a href="#">啦啦啦啦</a></li>
  <li><a href="#">哗哗哗哗</a></li>
  <li><a href="#">呵呵呵呵</a></li>
<li><form method="get" >
    <input

class="search-input" type="text" name="q">
搜索框

</form>
</li>
</ul>
</div>
<div class="center">
<div class="box1">
<form name="forml" method="post" action="注册页

面.html">
<h3>登录页面</h3>

账户:<input name="username" type="text" size="15" placeholder="您的

账户">
<br><br>
密码:<input name="password" type="password" size="15" placeholder="

您的密码">
<br><br>
<input type="submit" name="submit" value="提交">
<input type="reset" name="submit2" value="重置">
<ol>
<li><a href="Untitled-3.html"><img src="370.jpg"

width="100px" height="100px">商品简介</a></li>
<li><a href="Untitled-3.html"><img src="370.jpg"

width="100px" height="100px">商品简介</a></li>
  </ol>
</form>
  </div>
  <div class="box2">

src="http://libs.baidu.com/jquery/1.9.0/jquery.js"/>
</script>

        #main{
        position: relative;
        height: 100%;
    }

.pin{
        padding: 15px 0 0 15px;
        float:left;

position: absolute;
}

    .box{
        padding: 10px;
        border:1px solid #ccc;

box-shadow: 0 0 6px #ccc;
border-radius: 5px;
}

    .box img{
        width:162px;
        height:auto;
    }

</style>

$( window ).on( "load", function(){

waterfall();
// 调用waterfall函数

var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},

{'src':'3.jpg'},{'src':'4.jpg'}]};

window.onscroll=function(){

// 拖动滚动条时

}
});

var _al = [];
function waterfall(){

// 计算及定位数据块显示分散效果

var _pin = $("#main").find(".pin");

var _pw = _pin.eq(0).outerWidth();

var _wh = $(window).height()/2;

var _ww = $(window).width();

var _co = Math.floor(_ww/_pw);

var _pi = _pin.length;
// 初始化数组

for(var i in _pin){

if(i<_co){

_al.push(0);

}

_pin.eq(i).css({

top:_wh,

left:'50%',

'margin-top':-(_pin.height()/2)+((Math.floor

(Math.random()*10)<5?-1:1)*Math.floor(Math.random()*200)),

'margin-left':-(_pin.width()/2)+((Math.floor

(Math.random()*10)<5?-1:1)*Math.floor(Math.random()*200))

});
}

animateWater(_pin,0,_pw);
}

function checkscrollside(){

// 检测是否具备了加载数据块的条件
}

function animateWater(_pin,_i,_pw){
var _t = getMin(_al);

_pin.eq(_i).animate({

            left:_t*_pw,
            'margin':0,
            top:_al

[_t]
        },300,
function(){
            _al[_t]+=_pin.eq(_i).outerHeight();

_i++;
animateWater(_pin,_i,_pw);
})
}

function getMin(_al){
var _minT = Math.min.apply(null,_al);

for(var i in _al){
        if(_al[i]==_minT){
            return i;

}
}
}

</script>
</head>
<body>

<img src="http://pica.nipic.com/2007-11-

09/2007119124513598_2.jpg"/>
        </div>
    </div>
    <div

class="pin">
<div class="box">
<img

src="http://pic.nipic.com/2007-11-09/200711912453162_2.jpg"/>

</div>
    </div>
    <div class="pin">
        <div class="box">

<img

src="http://a2.att.hudong.com/04/58/300001054794129041580438110_950.

jpg"/>
        </div>
    </div>
    <div class="pin">
        <div

class="box">
<img

src="http://pic1.ooopic.com/uploadfilepic/sheji/2009-05-

05/OOOPIC_vip4_20090505079ae095187332ea.jpg"/>
</div>

</div>
    <div class="pin">
        <div class="box">
            <img

src="http://pica.nipic.com/2007-11-09/2007119124513598_2.jpg"/>

</div>
    </div>
    <div class="pin">
        <div class="box">

<img src="http://pic.nipic.com/2007-11-

09/200711912453162_2.jpg"/>
        </div>
    </div>
    <div

class="pin">
<div class="box">
<img

src="http://a2.att.hudong.com/04/58/300001054794129041580438110_950.

jpg"/>
        </div>
    </div>
    <div class="pin">
        <div

class="box">
<img

src="http://pic1.ooopic.com/uploadfilepic/sheji/2009-05-

05/OOOPIC_vip4_20090505079ae095187332ea.jpg"/>
</div>

</div>
    <div class="pin">
        <div class="box">
            <img

src="http://pica.nipic.com/2007-11-09/2007119124513598_2.jpg"/>

</div>
    </div>
    <div class="pin">
        <div class="box">

<img src="http://pic.nipic.com/2007-11-

09/200711912453162_2.jpg"/>
        </div>
    </div>
    <div

class="pin">
<div class="box">
<img

src="http://a2.att.hudong.com/04/58/300001054794129041580438110_950.

jpg"/>
        </div>
    </div>
    <div class="pin">
        <div

class="box">
<img

src="http://pic1.ooopic.com/uploadfilepic/sheji/2009-05-

05/OOOPIC_vip4_20090505079ae095187332ea.jpg"/>
</div>

</div>
    <div class="pin">
        <div class="box">
            <img

src="http://pica.nipic.com/2007-11-09/2007119124513598_2.jpg"/>

</div>
    </div>
    <div class="pin">
        <div class="box">

<img src="http://pic.nipic.com/2007-11-

09/200711912453162_2.jpg"/>
        </div>
    </div>
    <div

class="pin">
<div class="box">
<img

src="http://a2.att.hudong.com/04/58/300001054794129041580438110_950.

jpg"/>
        </div>
    </div>
    <div class="pin">
        <div

class="box">
<img

src="http://pic1.ooopic.com/uploadfilepic/sheji/2009-05-

05/OOOPIC_vip4_20090505079ae095187332ea.jpg"/>
</div>

</div>
    <div class="pin">
        <div class="box">
            <img

src="http://pica.nipic.com/2007-11-09/2007119124513598_2.jpg"/>

</div>
    </div>
    <div class="pin">
        <div class="box">

<img src="http://pic.nipic.com/2007-11-

09/200711912453162_2.jpg"/>
        </div>
    </div>
    <div

class="pin">
<div class="box">
<img

src="http://a2.att.hudong.com/04/58/300001054794129041580438110_950.

jpg"/>
        </div>
    </div>
    <div class="pin">
        <div

class="box">
<img

src="http://pic1.ooopic.com/uploadfilepic/sheji/2009-05-

05/OOOPIC_vip4_20090505079ae095187332ea.jpg"/>
</div>

</div>
</div>

  </div>

   </div>
   <div class="footer">jx370出版，不可能有雷同</div>
</div>
</body>
</html>