您的位置：首页 > 运维架构 > Tomcat

瀑布流点击加载更多（记住tomcat下启动，做过瀑布流的大家估计都知道为啥）

2016-01-02 23:21 573 查看


废话不多说，直接上代码：http://download.csdn.net/detail/cometwo/9387665

这个带淡出效果，比较高大上哦：http://download.csdn.net/detail/cometwo/9387971

通过打开/关闭注释235行可以实现自动加载和点击加载更多，是一个瀑布流最经典的例子，完全 适用于各种瀑布流项目

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery制作图片瀑布流点击按钮加载更多内容-xw素材网</title>

<style type="text/css">
* {
margin: 0;
padding: 0;
left: 0;
top: 0;
list-style-type: none;
background-color: white;
}

a,
img {
border: 0;
margin: 0;
left: 0;
top: 0;
}

body {
font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
}
/* container */

#container {
border: 1px solid red;
width: 95%;
margin: 50px auto;
}

#container ul {
width: 300px;
list-style: none;
float: left;
margin-right: 20px;
}

#container ul li {
margin-bottom: 20px;
background: blue;
/*border: 1px solid black;*/
}

#container ul li img {
width: 100%;

margin-bottom: -7px;
/*border: 1px solid red;*/
}

.water_user {
color: blue;
padding: 10px;
margin: 0px;
border: 1px solid blue;
background-color: green;
}

.water_option {
/* width: 290px;*/
background: yellow;
border-top: 0px #f0f0f0 solid;
padding: 5px 0 5px 20px;
border: 1px solid blue;
height: 20px;
}

/*.water_option:after {
content: "";
display: block;
clear: both;
visibility: hidden;
}*/

.water_option .option_item,
.water_option .split {
float: right;
background: yellow;
}

.water_option .option_item {
color: red;
text-decoration: none;
margin-right: 10px;
}

.water_option .option_item:hover {
text-decoration: underline;
}

.water_option .split {
line-height: 30px;
margin: 3px 10px 0 0;
height: 15px;
width: 1px;
background-color: red;
}

.loadMeinvMOre {
height: 30px;
line-height: 30px;
color: red;
text-align: center;
background: blue;
display: block;
clear: both;
text-decoration: none;
}

.loadMeinvMOre:hover {
background: blueviolet;
color: green;
}
</style>

</head>

<body>

<div id="container">

<ul class="col">
<li>
<div class="water_pic">
<a href=""><img src="img/1.jpg" alt="" /></a>
</div>
<div class="water_user">美女小清新_1</div>
<div class="water_option">
<a href="" class="option_item">收藏 4</a>
<span class="split"> </span>
<a href="" class="option_item option_comt">评论 8</a>
<span class="split"> </span>
<a href="" class="option_item option_relay">转播 124</a>
</div>
</li>

</ul>

<ul class="col">
<li>
<div class="water_pic">
<a href=""><img src="img/2.jpg" alt="" /></a>
</div>
<div class="water_user">美女小清新_2</div>
<div class="water_option">
<a href="" class="option_item">收藏 4</a>
<span class="split"></span>
<a href="" class="option_item option_comt">评论 8</a>
<span class="split"></span>
<a href="" class="option_item option_relay">转播 124</a>
</div>
</li>
</ul>
<ul class="col">
<li>
<div class="water_pic">
<a href=""><img src="img/7.jpg" alt="" /></a>
</div>
<div class="water_user">美女小清新_7</div>
<div class="water_option">
<a href="" class="option_item">收藏 4</a>
<span class="split"></span>
<a href="" class="option_item option_comt">评论 8</a>
<span class="split"></span>
<a href="" class="option_item option_relay">转播 124</a>
</div>
</li>
</ul>
<ul class="col">
<li>
<div class="water_pic">
<a href=""><img src="img/9.jpg" alt="" /></a>
</div>
<div class="water_user">美女小清新_8</div>
<div class="water_option">
<a href="" class="option_item">收藏 4</a>
<span class="split"></span>
<a href="" class="option_item option_comt">评论 8</a>
<span class="split"></span>
<a href="" class="option_item option_relay">转播 124</a>
</div>
</li>
</ul>

<a href="javascript:" class="loadMeinvMOre" id="loadMeinvMOre">加载更多</a>

</div>
<!--container end-->

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {
function getMinUl() { //每次获取最短的ul,将图片放到其后
var $arrUl = $("#container .col");
var $minUl = $arrUl.eq(0); //设置比较参考，假设第一个最小
var A = "";
$arrUl.each(function(index, elem) {
//  alert(index+','+$(elem).height());
if ($(elem).height() <= $minUl.height()) { //考虑特殊情况
$minUl = $(elem); //找到最小的，替换掉之前最小的
A += "(" + index + ":" + $(elem).height() + ")" + '\n';
//  alert("$minUl.height()  :"+$minUl.height());
}
});
//  alert(A + '\n' + "$minUl.height()返回:" + $minUl.height());
return $minUl;
}
//url data function dataType
function loadMeinv() {
var data = 0;
for (var i = 0; i < 20; i++) { //每次加载时模拟随机加载图片个数
data = Math.round(Math.random() * 24);
var html = "";
html = '<li><div class="water_pic"><a href="#"><img src = img/' + data + '.jpg></a></div><div class="water_user">美女小清新_' + data + '</div><div class="water_option"><a href="" class="option_item">收藏 4</a> <span class="split"></span><a href="" class="option_item option_comt">评论 8</a><span class="split"></span><a href="" class="option_item option_relay">转播 124</a></div></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;
//              }
//点击更多加载
$("#loadMeinvMOre").click(function() {
$minUl = getMinUl();
loadMeinv();
});
})
</script>

</body>

</html>


此程序在自动加载没有任何问题，但是加载更多会出现小BUG，火狐浏览器测试一切正常，谷歌浏览器和360安全浏览器可能能会出现以下问题，思索良久，不能找出问题原因，盼高人看到，求解，万分感谢！！！小弟在此跪谢



[b]*********************************[/b]

原地址：http://www.17sucai.com/pins/2929.html#，提供了瀑布流的新思路

<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8" />
<title>瀑布流</title>
<script type="text/javascript" src="js/jquery-3.0.0.js"></script>
<style type="text/css">
/* 标签重定义 */

body {
padding: 0;
margin: 0;
background: white;
}

img {
border: none;
}

a {
text-decoration: none;
color: blue;
}

a:hover {
color: red;
}

#title {
width: 600px;
margin: 20px auto;
text-align: center;
border: 1px solid red;
}
/* 定义关键帧 */
/* wrap */

#wrap {
width: auto;
height: auto;
margin: 0 auto;
position: relative;
}

#wrap .box {
width: 280px;
height: auto;
padding: 10px;
border: 1px solid red;
float: left;
}

#wrap .box .info {
/*width: 280px;
height: auto;*/
border: 1px solid blue;
border-radius: 8px;
box-shadow: 0 0 11px #666;
background: #fff;
}

#wrap .box .info .pic {
width: 260px;
height: auto;
margin: 0 auto;
padding-top: 10px;
border: 1px solid green;
}

#wrap .box .info .pic:hover {
-webkit-animation: shade 3s ease-in-out 1;
-moz-animation: shade 3s ease-in-out 1;
-ms-animation: shade 3s ease-in-out 1;
-o-animation: shade 3s ease-in-out 1;
animation: shade 3s ease-in-out 1;
}

@keyframes shade {
from {
opacity: 1;
}
15% {
opacity: 0.4;
}
to {
opacity: 1;
}
}

#wrap .box .info .pic img {
width: 260px;
border-radius: 3px;
}

#wrap .box .info .title {
width: 260px;
height: 40px;
margin: 0 auto;
border: 1px solid red;
line-height: 40px;
text-align: center;
font-size: 18px;
font-weight: bold;
overflow: hidden;
}
</style>

<script type="text/javascript">
window.onload = function() {
//运行瀑布流主函数
PBL('wrap', 'box');
//投机取巧的方法
window.onresize=function(){
window.location.reload();
}
//模拟数据
var data = [{
'src': '1.jpg',
'title': 'This is a title.'
}, {
'src': '2.jpg',
'title': 'This is a title.'
}, {
'src': '3.jpg',
'title': 'This is a title.'
}, {
'src': '4.jpg',
'title': 'This is a title.'
}, {
'src': '5.jpg',
'title': 'This is a title.'
}, {
'src': '6.jpg',
'title': 'This is a title.'
}, {
'src': '7.jpg',
'title': 'This is a title.'
}, {
'src': '8.jpg',
'title': 'This is a title.'
}, {
'src': '9.jpg',
'title': 'This is a title.'
}, {
'src': '10.jpg',
'title': 'This is a title.'
}];

//设置滚动加载
window.onscroll = function() {
//校验数据请求
if (getCheck()) {
var wrap = document.getElementById('wrap');
for (i in data) { //创建box
var box = document.createElement('div');
box.className = 'box';
wrap.appendChild(box);
//创建info
var info = document.createElement('div');
info.className = 'info';
box.appendChild(info);
//创建pic
var pic = document.createElement('div');
pic.className = 'pic';
info.appendChild(pic);
//创建img
var img = document.createElement('img');
img.src = 'img/' + data[i].src;
img.style.height = 'auto';
pic.appendChild(img);
//创建title
var title = document.createElement('div');
title.className = 'title';
info.appendChild(title);
//创建a标记
var a = document.createElement('a');
a.innerHTML = data[i].title;
title.appendChild(a);
}
PBL('wrap', 'box');
}
}
}
/**
* 瀑布流主函数
* @param  wrap [Str] 外层元素的ID
* @param  box  [Str] 每一个box的类名
*/
function PBL(wrap, box) {
//  1.获得外层以及每一个box
var wrap = document.getElementById(wrap);
var boxs = getClass(wrap, box); //是个数组
//  2.获得屏幕可显示的列数
var boxW = boxs[0].offsetWidth; //拿到box的可视宽度
console.log("box的可视宽度" + boxW);
var colsNum = Math.floor(document.documentElement.clientWidth / boxW); //应该是可以放几列
console.log("document.documentElement.clientWidth:" + document.documentElement.clientWidth + "       应该是可以放几列" + colsNum);
wrap.style.width = boxW * colsNum + 'px'; //为外层赋值宽度
//  3.循环出所有的box并按照瀑布流排列
var everyH = []; //定义一个数组存储每一列的高度
for (var i = 0; i < boxs.length; i++) {
if (i < colsNum) {
everyH[i] = boxs[i].offsetHeight;
} else {
var minH = Math.min.apply(null, everyH); //获得最小的列的高度
var minIndex = getIndex(minH, everyH); //获得最小列的索引
getStyle(boxs[i], minH, boxs[minIndex].offsetLeft, i);
everyH[minIndex] += boxs[i].offsetHeight; //更新最小列的高度
}
}
}
/**
* 获取类元素
* @param  warp     [Obj] 外层
* @param  className    [Str] 类名
*/
function getClass(wrap, className) {
var obj = wrap.getElementsByTagName('*');
var arr = [];
for (var i = 0; i < obj.length; i++) {
if (obj[i].className == className) {
arr.push(obj[i]);
}
}
return arr; //返回数组
}
/**
* 获取最小列的索引
* @param  minH  [Num] 最小高度
* @param  everyH [Arr] 所有列高度的数组
*/
function getIndex(minH, everyH) {
for (index in everyH) {
if (everyH[index] == minH) return index;
}
}
/**
* 数据请求检验
*/
function getCheck() {
var documentH = document.documentElement.clientHeight;
var scrollH = document.documentElement.scrollTop || document.body.scrollTop;
return documentH + scrollH >= getLastH() ? true : false;
}
/**
* 获得最后一个box所在列的高度
*/
function getLastH() {
var wrap = document.getElementById('wrap');
var boxs = getClass(wrap, 'box');
return boxs[boxs.length - 1].offsetTop + boxs[boxs.length - 1].offsetHeight;
}
/**
* 设置加载样式
* @param  box  [obj] 设置的Box
* @param  top  [Num] box的top值
* @param  left     [Num] box的left值
* @param  index [Num] box的第几个
*/
var getStartNum = 0; //设置请求加载的条数的位置
function getStyle(box, top, left, index) {
if (getStartNum >= index) return;
$(box).css({
'position': 'absolute',
'top': top,
"left": left,
"opacity": "0"
});
$(box).stop().animate({
"opacity": "1"
}, 999);
getStartNum = index; //更新请求数据的条数位置
}
</script>

</head>

<body>

<section id="title">
<h2>瀑布流效果的学习</h2>By Smile.
</section>

<div id="wrap">

<div class="box">
<div class="info">
<div class="pic"><img src="img/1.jpg"></div>
<div class="title"><a href="#">This is a title.</a></div>
</div>
</div>

<div class="box">
<div class="info">
<div class="pic"><img src="img/2.jpg"></div>
<div class="title"><a href="#">This is a title.</a></div>
</div>
</div>

<div class="box">
<div class="info">
<div class="pic"><img src="img/3.jpg"></div>
<div class="title"><a href="#">This is a title.</a></div>
</div>
</div>

<div class="box">
<div class="info">
<div class="pic"><img src="img/4.jpg"></div>
<div class="title"><a href="#">This is a title.</a></div>
</div>
</div>

<div class="box">
<div class="info">
<div class="pic"><img src="img/5.jpg"></div>
<div class="title"><a href="#">This is a title.</a></div>
</div>
</div>

<div class="box">
<div class="info">
<div class="pic"><img src="img/6.jpg"></div>
<div class="title"><a href="#">This is a title.</a></div>
</div>
</div>

<div class="box">
<div class="info">
<div class="pic"><img src="img/7.jpg"></div>
<div class="title"><a href="#">This is a title.</a></div>
</div>
</div>

<div class="box">
<div class="info">
<div class="pic"><img src="img/8.jpg"></div>
<div class="title"><a href="#">This is a title.</a></div>
</div>
</div>

<div class="box">
<div class="info">
<div class="pic"><img src="img/9.jpg"></div>
<div class="title"><a href="#">This is a title.</a></div>
</div>
</div>

<div class="box">
<div class="info">
<div class="pic"><img src="img/10.jpg"></div>
<div class="title"><a href="#">This is a title.</a></div>
</div>
</div>

</div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航