jquery实现瀑布流效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nav-head</title>
<style>
*{
margin:0;
padding:0;
}
.clearfix:after{visibility:hidden;clear:both;display:block;content:".";height:0}
.pull-list{
padding:5px;
font-size:0;
position:relative;
}
.pull-list .pull-box{
display:inline-block;
float:left;
}
.pboder{
border:1px solid #ccc;
padding:5px;
margin:5px;
font-size:12px;
}
img{
width:140px;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
</head>
<body>
<div class="pull-list clearfix">
<div class="pull-box">
<div class="pboder">
<img src="data:image/1.jpg">
</div>
</div>
<div class="pull-box">
<div class="pboder">
<img src="data:image/2.jpg">
</div>
</div>
<div class="pull-box">
<div class="pboder">
<img src="data:image/3.jpg">
</div>
</div>
<div class="pull-box">
<div class="pboder">
<img src="data:image/4.jpg">
</div>
</div>
<div class="pull-box">
<div class="pboder">
<img src="data:image/4.jpg">
</div>
</div>
<div class="pull-box">
<div class="pboder">
<img src="data:image/5.jpg">
</div>
</div>
<div class="pull-box">
<div class="pboder">
<img src="data:image/6.jpg">
</div>
</div>
<div class="pull-box">
<div class="pboder">
<img src="data:image/7.jpg">
</div>
</div>
<div class="pull-box">
<div class="pboder">
<img src="data:image/8.jpg">
</div>
</div>
<div class="pull-box">
<div class="pboder">
<img src="data:image/9.jpg">
</div>
</div>
<div class="pull-box">
<div class="pboder">
<img src="data:image/10.jpg">
</div>
</div>
</div>
<script src="jquery.min.js"></script>
<script>
$(window).on("load",function(){
function getSlist(){
var docW = $(window).width(),
boxW = $('.pull-box').eq(0).outerWidth(),
boxL = Math.floor(docW/boxW);
$(".pull-list").css({
"margin":"0 auto",
"width":boxW*boxL
})
var arrBox = [];
$('.pull-box').each(function(key,val){
var boxH = $(val).outerHeight();
if(key<boxL){
arrBox[key] = boxH;
}else{
var minH = Math.min.apply(null,arrBox);
var minIndex =$.inArray(minH,arrBox);
$(val).css({
"position":"absolute",
"left":(minIndex*boxW+5)+"px",
"top":(minH+5)+"px"
})
arrBox[minIndex] += $('.pull-box').eq(key).outerHeight();
}
})
}
getSlist();
function checkScroll(){
$(window).scroll(function(){
if($(document).height() < $(window).height() + parseInt($(window).scrollTop(),10) + 50){
$.ajax({
url:"text.json",
method:"GET",
success:function(data){
var res = data.list;
var str = "";
for(var i=0; i<res.length; i++){
str ='<div class="pull-box">'+
' <div class="pboder">'+
' <img src="data:image/'+res[i]+'">'+
' </div>'+
' </div>';
$(".pull-list").append(str);
}
getSlist();
},
error:function(data){
console.log(data)
}
})
}
});
}
checkScroll();
$(window).resize(function() {
checkScroll();
})
})
</script>
</body>
</html>
text.json{
"list":["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg"]
}
jquery实现瀑布流效果的更多相关文章
- 用jQuery实现瀑布流效果学习笔记
jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...
- 【前端】用jQuery实现瀑布流效果
jQuery实现瀑布流效果 何为瀑布流: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早 ...
- jQuery淡入淡出瀑布流效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery实现瀑布流
瀑布流布局多用于加载图片,或者图片配上文字.视觉表现为参差不齐的多栏布局.随着页面滚动条向下滚动,还会不断加载数据块并附加至当前尾部.本文就来利用jQuery实现一个图片瀑布流的效果. 1.布局. 首 ...
- Jquery简单瀑布流代码示例
最近很多网站都采用瀑布流风格设计,感觉挺有个性的,比较合适做图片类型的网站,没事仿开心网做一个瀑布流示例. 需要用到Jquery,jquery.masonry.min.js <!DOCTYPE ...
- jquery版瀑布流
一个月前用jquery实现了瀑布流效果,看着当时的代码有点难过……今天抽时间稍微修改了一下.额,现在看起来不是那么难受了,就来和大家分享一下.废话不多说,开始正题~ 一.演示效果 二.html代码 & ...
- RecylerView完美实现瀑布流效果
RecylerView包含三种布局管理器,分别是LinearLayoutManager,GridLayoutManager,StaggeredGridLayoutManager,对应实现单行列表,多行 ...
- 使用JS实现图片展示瀑布流效果
不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度 ...
- WPF下制作的简单瀑布流效果
最近又在搞点小东西,美化界面的时候发现瀑布流效果比较不错.顺便就搬到了WPF,下面是界面 我对WEB前端不熟,JS和CSS怎么实现的,我没去研究过,这里就说下WPF的实现思路,相当简单. 1.最重要的 ...
随机推荐
- PostgreSQL备份与还原
物理备份:整个数据库的数据目录及文件做备份:备份整个数据库的文件系统. 物理恢复:恢复整个数据库的文静系统. 物理备份方法: 开启归档 select pg_start_backup('backup—— ...
- T_SQL 字符串函数
字符串函数用于处理列中的数据值,通常属于字符型的数据类型. 1.ASCLL(character),将具体字符转换为相应的整数(ASCII)代码,结果为正数. 例:select ASCII('A'), ...
- bash编程,while嵌套case语句, file不能判断文件存在与否
写一个脚本, 完成如下要求 (1)脚本可接受参数 : start, stop, restart, status, (2)如果参数非非法, 提示使用格式后报错退出; (3)如果是start, 则创建/t ...
- blongsTo 用法
当存在这样两张表的时候: one{ , 'name':"name" 'sex':"sex" } two{ , 'type':json } 当我们需要在调用到 o ...
- 洛谷3857 [TJOI2008]彩灯
题目描述 已知一组彩灯是由一排N个独立的灯泡构成的,并且有M个开关控制它们.从数学的角度看,这一排彩灯的任何一个彩灯只有亮与不亮两个状态,所以共有2N个样式.由于技术上的问题,Peter设计的每个开关 ...
- opencv——均值/中值滤波器去噪
实验内容及实验原理: 1．用均值滤波器(即邻域平均法)去除图像中的噪声: 2．用中值滤波器去除图像中的噪声 3．比较两种方法的处理结果 实验步骤: 用原始图像lena.bmp或cameraman.bm ...
- Win10 + YOLOv3 环境配置，编译，实现目标检测----How to compile YOLOv3 on Windows
其他比较好的参考链接: 环境配置: 环境配置的最终图片列表:https://blog.csdn.net/shanglianlm/article/details/80322718 视频讲解YOLOv1: ...
- 紫书 例题 10-14 UVa 12034（组合数+递推）
这道题有点类似动态规划,设答案为f(n) 第一个人有i个人,就有c(n,i)种可能 然后后面有f(n-i)种可能,所以相乘,然后枚举所有可能加起来就ok了. #include<cstdio> ...
- 解决Python 插查 MySQL 时中文乱码问题
首先找到这里的解决方法, count = cursor.fetchall() for i in count: idc_a = i[0] if isinstance(idc_a, unicode): i ...
- vmware启动虚拟机报错VMware Workstation has paused this virtual machine because the disk on which the virtual machine is stored is almost full. To continue, free an additional 1.4 GB of disk space.
报错VMware Workstation has paused this virtual machine because the disk on which the virtual machine i ...