瀑布流点击载入很多其它（记住tomcat下启动，做过瀑布流的大家预计都知道为啥）
Posted jzdwajue
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了瀑布流点击载入很多其它（记住tomcat下启动，做过瀑布流的大家预计都知道为啥）相关的知识，希望对你有一定的参考价值。
废话不多说。直接上代码：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制作图片瀑布流点击button载入很多其它内容-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安全浏览器可能能会出现下面问题，思索良久，不能找出问题原因。盼高人看到。求解。万分感谢。！
。小弟在此跪谢
*********************************
原地址：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>以上是关于瀑布流点击载入很多其它（记住tomcat下启动，做过瀑布流的大家预计都知道为啥）的主要内容，如果未能解决你的问题，请参考以下文章