Dreamweaver 8 制作美女图片瀑布流无限加载效果
1、打开Macromedia Dreamweaver 8软件，然后把<head></h髫潋啜缅ead>之间的代码改为如下：<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><p>src=' +data+'.jpg</p>僧淘网</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"的格式，然后在批量上传到你服务器上面对应的图片文件夹里，就大功告成了！~
