<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>瀑布流</title>
<script src="https://raw.github.com/RubyLouvre/mass-Framework/master/client/mass.js"></script>
<script>
window.onerror = function(){
location.reload();//如果报错,请它自动刷新。
}
$.require("more/random,ready,css,event",function(random){
//容器的CSS表达式,列数,每列的宽度
var Waterfall = function(expr, col, colWidth){
//构建整体轮廓
var container = this.container = $(expr);
var pw = container.width();//容器的宽
var gw = (pw - col * colWidth)/(col-1);//列间距离
this.colWidth = colWidth;
this.cols = [];
for(var i = 0; i < col ; i++){//随机生成列
this.cols[i] = $("<div class='waterfall' />").css({
position: "absolute",
top: 0,
left: (colWidth + gw) * i,
width: colWidth,
backgroundColor: random.hex()
}).appendTo(container);
}
}
Waterfall.prototype = {
//添加板块
addBlocks : function(){
for(var i = 0; i < 40; i++){//随机生成40个板砖
$("<div class='waterfall_block' />").css({
margin: 5,
width: this.colWidth - 10 ,
height: random.num(80, 300),
backgroundColor: random.hex()
}).appendTo( this.whichCol() );
}
},
//计算出最短的栏栅
whichCol:function(el, ret, h){
for(var i = 0, shortest = 0; el = this.cols[i]; i++){
h = el.height();
if(i == 0){
shortest = h;
ret = el;
}
if(h < shortest ){
shortest = h;
ret = el;
}
}
return ret;
}
};
var waterfall = new Waterfall("body",4,300)
waterfall.addBlocks();
$(window).scroll(function(){
var clientHeight = $(window).height(),
scrollTop = $(window).scrollTop(),
scrollHeight = $(document).height();
if(clientHeight + scrollTop >= scrollHeight ){
waterfall.addBlocks();
}
})
})
</script>
</head>
<body>
<p>
瀑布流 by 司徒正美
</p>
</body>
</html>
分享到:
相关推荐
小程序源码 瀑布流布局 (代码+截图)小程序源码 瀑布流布局 (代码+截图)小程序源码 瀑布流布局 (代码+截图)小程序源码 瀑布流布局 (代码+截图)小程序源码 瀑布流布局 (代码+截图)小程序源码 瀑布流布局 (代码+截图)小...
微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信...
微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)...
有两种基本的瀑布流可选
国外牛人瀑布流 瀑布流 多样式 国外多样式瀑布流
微信小程序——瀑布流布局(截图+源码).zip 微信小程序——瀑布流布局(截图+源码).zip 微信小程序——瀑布流布局(截图+源码).zip 微信小程序——瀑布流布局(截图+源码).zip 微信小程序——瀑布流布局(截图+...
纯css3实现横向瀑布流布局,让图片看起来更美观。
手机端瀑布流,类似于meilishuo的形式,很好的用户体验
瀑布流Html5网站模板
React Native 瀑布流列表,用于展示瀑布流形式的内容,定制简单。
图片瀑布流 jquery 图片瀑布流 jquery图片瀑布流 jquery图片瀑布流 jquery
android 瀑布流效果,详情请下载参考,如有问题请留言指明,thanks for you.
瀑布流布局,http://blog.csdn.net/qq_18983205/article/details/72630547对应的代码
1. 参考了某位大神OC版本的瀑布流实现了swift版本的瀑布流 2. 里面使用的也是改为大神的数据,如有数据版权问题,请通知我,我及时下架
通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示。用户可以无限浏览图片或内容无限加载瀑布流效果
目前最流行的瀑布流无限加载代码,非常适合各种图片站,手机端网站,还可引入json数据
瀑布流 非定位 简易瀑布流
实现照片数据等宽、瀑布流显示
原生JS瀑布流布局,无限加载
瀑布流显示美女图片图片瀑布流效果源码下载