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.最重要的 ...
随机推荐
- DAG-背包九解-01背包
饭卡: 电子科大本部食堂的饭卡有一种很诡异的设计,即在购买之前判断余额.如果购买一个商品之前,卡上的剩余金额大于或等于5元,就一定可以购买成功(即使购买后卡上余额为负),否则无法购买(即使金额足够 ...
- 四 numpy操作数组输出图片
一.读取一张图片,修改颜色通道后输出 # -*- coding=GBK -*- import cv2 as cv import numpy as np #numpy数组操作 def access_pi ...
- [Jsoi2010]连通数 bitset + Floyd
Code: #include<cstdio> #include<algorithm> #include<string> #include<cstring> ...
- CMD和AMD的区别
CMD和AMD俩者之间的区别 AMD和CMD最大的区别是对依赖模块的执行时机处理不同 CMD和AMD都是CommonJS延伸而来的,CommonJS是随着node的出现而出现的,它是一个规范,用于定义 ...
- hdu 6363 bookshelf
题解讲的很清楚了,直接看代码就懂了 题解:http://bestcoder.hdu.edu.cn/blog/2018-multi-university-training-contest-6-solut ...
- 洛谷 P3419 [POI2005]SAM-Toy Cars
P3419 [POI2005]SAM-Toy Cars 题目描述 Johnny is a little boy - he is only three years old and enjoys play ...
- [React Native] Use the SafeAreaView Component in React Native for iPhone X Compatibility
In this lesson, you will learn how to use the SafeAreaView component to avoid the sensor cluster (th ...
- Servlet具体解释
Servlet具体解释 基本概述 Session在计算机中,尤其是在网络应用中,称为"会话控制".在计算机专业术语中.Session是指一个终端用户与交互系统进行通信的时间间隔,通 ...
- [python]pip坏了怎么办？
今天,给一位新同事配置pip,用get-pip.py安装之后.出现错误: raise DistributionNotFound(req) # XXX put more info here pkg_r ...
- Create an ASP.NET Core web app in Visual Studio Code
https://www.microsoft.com/net/core#windowscmd https://download.microsoft.com/download/B/9/F/B9F1AF57 ...