Dreamweaver 8 制作美女图片瀑布流无限加载效果
1、打开Macromedia Dreamweaver 8软件，然后把<head></head>之间的代码改为如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>美女图片瀑布流无限加载效果</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* container */
#container{width:940px;margin:50px auto;}
#container ul{width:300px;list-style:none;float:left;margin-right:20px;}
#container ul li{margin-bottom:20px;}
#container ul li img{width:300px;}
</style>
</head>
2、然后在<body></body>之间插入一下代码：
<body>
<div id="container">
<ul class="col">
<li><img src="http://www.staoo.cn/jscss/demoimg/201405/-1.jpg" alt=""/></li>
<li><img src="http://www.staoo.cn/jscss/demoimg/201405/-2.jpg" alt=""/></li>
<li><img src="http://www.staoo.cn/jscss/demoimg/201405/-3.jpg" alt=""/></li>
</ul>
<ul class="col"></ul>
<ul class="col" style="margin-right:0"></ul>
</div>
<script type="text/javascript" src="http://www.staoo.cn/ajaxjs/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
function loadMeinv(){
var data = 0;
for(var i=0;i<9;i++){//每次加载时模拟随机加载图片
data = parseInt(Math.random()*9);
var html = "";
html = '<li><img src =http://www.staoo.cn /jscss/demoimg/201405/-'
+data+'.jpg>src='
+data+'.jpg僧淘网</li>';
$minUl = getMinUl();
$minUl.append(html);
}
}
loadMeinv();
$(window).on("scroll",function(){
$minUl = getMinUl();
if($minUl.height() <= $(window).scrollTop()+$(window).height()){
//当最短的ul的高度比窗口滚出去的高度+浏览器高度大时加载新图片
loadMeinv();
}
})
function getMinUl(){//每次获取最短的ul,将图片放到其后
var $arrUl = $("#container .col");
var $minUl =$arrUl.eq(0);
$arrUl.each(function(index,elem){
if($(elem).height()<$minUl.height()){
$minUl = $(elem);
}
});
return $minUl;
}
})
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
3、如果你要修改文字显示的内容，请到相应的位置代码修改就可以！
4、如果您想换一张图片，则需要切换到“设计”的页面，点击一张图片，然后点击“替换”这两个字前面的文件夹图标，就可以换图片了。
5、如果你觉得麻烦，可以先批量准备好图片，并把图片一次性命名为："-数字.jpg"的格式，然后在批量上传到你服务器上面对应的图片文件夹里，就大功告成了！~
