瀑布流

来源：互联网发布：java垃圾回收机制 3个编辑：程序博客网时间：2024/04/29 18:06
没实践过，不知道有效否
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>瀑布流布局</title><style type="text/css">* {margin: 0;padding: 0;list-style: none;}.wrap {width: 100%;margin: 0 auto;}.wrap h2 {height: 60px;line-height: 60px;background: #333;color: #fff;padding-left: 200px;}.wrap .cont {width: 1000px;margin: 0 auto;}.cont ul {float: left;margin: 0 25px;}.cont ul li {width: 200px;height: 80px;background: #dcdcdc;margin: 10px 0;}.cont ul li.a1 {background: #3cf;height: 100px;}.cont ul li.a2 {background: #cf3;height: 180px;}.cont ul li.a3 {background: #fc3;height: 150px;}.cont ul li.a4 {background: #3fc;height: 240px;}.cont ul li.a5 {background: #ff00ff;height: 240px;}.cont ul li.a6 {background: #8400ff;height: 300px;}.cont ul li.a7 {background: #ff0000;height: 50px;}.clear {clear: both;}</style><script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><script type="text/javascript">$(function () {// 先获取页面中ul中的最小高度function appendLi () {var ulList = $('.cont ul');var ul1_h = ulList[0].offsetHeight; var ul2_h = ulList[1].offsetHeight;var ul3_h = ulList[2].offsetHeight;var ul4_h = ulList[3].offsetHeight;var minUl = Math.min(ul1_h, ul2_h, ul3_h, ul4_h); // 获取ul中最小的高度var min_ul = '';var lis = '';for (var i = 0; i < ulList.length; i++) {if (ulList[i].offsetHeight == minUl) {   // 比较ul中最小的一个min_ul = ulList[i];}lis = '<li class="a'+getRandom(10)+'"></li>';}$(min_ul).append(lis); // 最小的元素下面添加li}for (var i = 0; i < 14; i++) {  // 页面一加载就循环添加 可去掉appendLi();}// 生成随机数function getRandom (n){        return Math.floor(Math.random()*n+1)        }        // 当滚动条滚动的时候 触发函数window.onscroll = function () {var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;var docH = document.documentElement.offsetHeight;//整个文档高度var winH = document.documentElement.clientHeight;//窗口高度if (docH-winH-100 < scrollTop) {appendLi();}// 窗口的高+滚动条距离顶部的距离 = 文档的高度// 文档的高度 - 窗口的高度 =  滚动条距离顶部的距离// 文档的高度 - 窗口的高度 - 100 < 滚动条距离顶部的距离// 最终得到的可以用另一句话说 滚动条距离底部100像素}})</script></head><body><div class="wrap"><h2>瀑布流展示：</h2><div class="cont"><ul><li class="a1"></li></ul><ul><li class="a2"></li></ul><ul><li class="a3"></li></ul><ul><li class="a4"></li></ul><div class="clear"></div></div></div></body></html>
0 0