<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.11.1.js"></script>
<script>
$(function(){
var arr=[]; //存放每一列的高度
var boxw=$(".box:first").outerWidth(true);
// width本身宽innerWidth width+padding outerWidth() width+padding+border outerWidth(true) width+padding +border+margin
var ww=$(window).width();
var col=Math.floor(ww/boxw);
$("#wrapper").width(col*boxw).css("margin","0 auto");
var pics=["images/37.jpg","images/38.jpg","images/39.jpg","images/40.jpg","images/41.jpg"]
$(window).scroll(function(){
if(isLoad()){
console.log("load...");
$.each(pics,function(i,ele){
var box = $("<div class='box'></div>");
$("<div class='pics'></div>").html('<img src="'+ele+'" />').appendTo(box);
box.appendTo($("#wrapper"));
})
waterWall();
}
})
waterWall();
function waterWall(){
$(".box").each(function(index){
if(index<col){ // 第一行
arr[index]=$(this).outerHeight();
}
else{ //从第二行开始的下标就大于col

var minH = Math.min.apply(null,arr); //找到最小高度的值
var minIndex=$.inArray(minH,arr); // indexOf //找到最小高度的值在数组中的索引
$(this).css({ //定位当前元素
position:'absolute',
//top:minH+"px", //top 设为最小值 minH
left:boxw+"px" //从哪漂过来
}).animate({
left:boxw*minIndex+"px", //关键 left值设为最小值的索引与一个box宽度的积
top:minH+"px" //设这个值会有高度上的动画
})
arr[minIndex]+=$(this).outerHeight();//刷新最小列的高度
}
});
}
function isLoad(){
var pos=$(".box:last").offset().top+Math.floor($(".box:last").outerHeight()/2);
var ws=$(window).height()+$(window).scrollTop();
if(pos<ws){
return true;
}
else{
return false;
}
}
});
</script>
</head>
<body>
<div id="wrapper" style="height:3000px">
<div class="box">
<div class="pics">
<img src="data:images/0.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/1.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/2.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/3.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/4.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/5.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/6.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/7.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/8.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/9.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/10.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/11.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/12.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/13.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/14.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="data:images/15.jpg" alt="">
</div>
</div>
</div>
</body>
</html>

JQuery瀑布流特效（练习）的更多相关文章

  1. jQuery实现无限加载瀑布流特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 网友微笑分享原创Jquery实现瀑布流特效

    首先非常感谢网友微笑的无私分享,此Jquery特效是一款非常流行和实用的瀑布流布局,核心代码只有几十行,是我见过代码量最少的瀑布流布局,非常适合网友们学习哦,希望大家好好看一下这个Jquery特效的原 ...

  3. jQuery瀑布流从不同方向加载3种效果演示

    很实用的一款插件jQuery瀑布流从不同方向加载3种效果演示在线预览 下载地址 实例代码 <section class="grid-wrap"> <ul clas ...

  4. 8款实用的Jquery瀑布流插件

    1.网友Null分享Jquery响应式瀑布流布局插件 首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机 ...

  5. jquery瀑布流排列样式代码

    <!DOCTYPE html><html><head lang="en"> <meta charset="gb2312" ...

  6. jquery瀑布流的制作

    首先,还是来看一下炫酷的页面: 今天就边做边说了: 一.准备工作 新建css,js,img文件夹存放相应文件,并在demo.html文件中引入外部文件(注意要把jquery文件引入),这里就不过多描述 ...

  7. jQuery瀑布流插件——jQuery.Waterfall

    插件--jQuery.Waterfall 思路: 其实只要了解了整个流程,要实现这个插件也不难,大家都玩过俄罗斯方块吧,原理差不多,找到合适的地方叠上去就好了,在这里,每个块的宽度是必需给定的,然后计 ...

  8. 炫酷的jquery瀑布流

    最近做了一个瀑布流效果,思路很简单 首先计算屏幕一行可以放多少个图片,然后在第二行开始,计算每一列的高度并取出最小值,将新图片加载在最小列高度下,如此循环,并且设定一个条件,当滑动到一定距离后,开始重 ...

  9. jQuery瀑布流无限拖三大利器：masonry+imagesloaded+infinitescroll

    瀑布流已经是几乎过时的技术了,不过对于很多想要快速实现它的朋友而言,却绝非易事,因为即使我们已经有很多现成的代码,却发现在自己的开发环境中无法快速得到自己想要的结果.就像我们现在要介绍的三大利器(ma ...

随机推荐

  1. nodejs从http升级到https（阿里云证书的使用）

    升级原因 1.各大搜索引擎中,https的网页的权重比一般的http的网页权重要高. 2.从用户体验的角度,一个老是被浏览器提醒该网页不可信的网页,总不会让用户感到安心 所以将网站从http升级为ht ...

  2. JavaScript 函数式编程读书笔记2

    概述 这是我读<javascript函数式编程>的读书笔记,供以后开发时参考,相信对其他人也有用. 说明:虽然本书是基于underscore.js库写的,但是其中的理念和思考方式都讲的很好 ...

  3. 标签页（tab）切换的原生js,jquery和bootstrap实现

    概述 这是我在学习课程Tab选项卡切换效果时做的总结和练手. 原课程中只有原生js实现,jquery和bootstrap实现是我自己补上的. 本节内容 标签页(tab)切换的原生js实现 标签页(ta ...

  4. .NET手记－Autofac入门Getting Started

    内容主要翻译自官方文档,原文请看:http://autofac.readthedocs.org/en/latest/getting-started/index.html#application-sta ...

  5. docker 中ulimit设置理解

    背景: 在k8s上跑es集群碰到的问题 OS版本 红旗4.5(基于centos6.8 内核) Docker:1.17.02 现象: 本次出现的问题现象:es pod启动失败,一直报max file d ...

  6. 深入理解css3中 nth-child 和 nth-of-type 的区别

    在css3中有两个新的选择器可以选择父元素下对应的子元素,一个是:nth-child 另一个是:nth-of-type. 但是它们到底有什么区别呢? 其实区别很简单::nth-of-type为什么要叫 ...

  7. js排序问题

    1.直接排序 var arr = [1,3,2,5]; function compare(a,b){ return a - b;//从小到大 return b - a;//从大到小 } console ...

  8. 在Hadoop集群上的HBase配置

    之前,我们已经在hadoop集群上配置了Hive,今天我们来配置下Hbase. 一.准备工作 1.ZooKeeper下载地址:http://archive.apache.org/dist/zookee ...

  9. 【转】使用notepad运行python

    Notepad++是一个开源的文本编辑器,功能强大而且使用方便,一般情况下,Notepad++作为代码查看器,很方便,但是每次要运行的时候,总是需要用右键打开其他的IDE来编译和运行,总有些不方便.特 ...

  10. mac下nginx搭建

    首先使用brew安装nginx brew install nginx 安装完毕后,如果我们要使用nginx监听本地的80端口,需要改掉mac自带的apache占用的80端口 sudo vim /etc ...