js 图片瀑布流效果实现
/**
* Created by wwtliu on 14/9/5.
*/
$(document).ready(function(){
$(window).on("load",function(){
imgLocation();
var dataImg = {"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"}]};
window.onscroll = function(){
if(scrollside()){
$.each(dataImg.data,function(index,value){
var box = $("<div>").addClass("box").appendTo($("#container"));
var content = $("<div>").addClass("content").appendTo(box);
// console.log("./img/"+$(value).attr("src"));
$("<img>").attr("src","./img/"+$(value).attr("src")).appendTo(content);
});
imgLocation();
}
};
});
}); function scrollside(){
var box = $(".box");
var lastboxHeight = box.last().get(0).offsetTop+Math.floor(box.last().height()/2);
var documentHeight = $(document).width();
var scrollHeight = $(window).scrollTop();
return (lastboxHeight<scrollHeight+documentHeight)?true:false;
} function imgLocation(){
var box = $(".box");
var boxWidth = box.eq(0).width();
var num = Math.floor($(window).width()/boxWidth);
var boxArr=[];
box.each(function(index,value){
// console.log(index+"--"+value);
var boxHeight = box.eq(index).height();
if(index<num){
boxArr[index]= boxHeight;
// console.log(boxHeight);
}else{
var minboxHeight = Math.min.apply(null,boxArr);
// console.log(minboxHeight);
var minboxIndex = $.inArray(minboxHeight,boxArr);
// console.log(minboxIndex);
// console.log(value);
$(value).css({
"position":"absolute",
"top":minboxHeight,
"left":box.eq(minboxIndex).position().left
});
boxArr[minboxIndex]+=box.eq(index).height();
}
});
}
js 图片瀑布流效果实现的更多相关文章
- js图片瀑布流效果
要实现图片瀑布流效果,首先得准备几张图片. html的部分比较简单就是将图片加载到浏览器就可以了 代码如下(注意放的图片多一点要不然之后无法滑动鼠标就无法达到瀑布流效果): <!DOCTYPE ...
- js 实现图片瀑布流效果,可更改配置参数 带完整版解析代码[waterFall.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...
- 手把手教你js原生瀑布流效果实现
手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...
- 利用LruCache载入网络图片实现图片瀑布流效果(改进版)
PS: 2015年1月20日21:37:27 关于LoadImageAsyncTask和checkAllImageViewVisibility可能有点小bug 改动后的代码请參见升级版本号的代码 ht ...
- JS+PHP瀑布流效果(二)
<!-- 加载商品 --><script> //用户拖动滚动条,达到底部时ajax加载一次数据 var loading = $("#loading&quo ...
- JS+PHP瀑布流效果
miai.php,代码如下: $link = mysql_connect("localhost","root",""); //连接数据库 $ ...
- 原生js实现瀑布流效果
参考此篇:https://segmentfault.com/a/1190000012621936 以下为个人测试中: css: .masonry{ width:100%; } .item{ posit ...
- 使用JS实现图片展示瀑布流效果
不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度 ...
- js实现瀑布流加载图片效果
今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.原理是:1. ...
随机推荐
- ecstore 安装后提示require function does not exist in....
解决: 安装好后,修改config.php里的TMP_DIR,指向网站目录下的data目录(用绝对路径) // define('TMP_DIR', '/data/www/data/tmp/'); 先 ...
- Puppeteer之大屏批量截图
事情的起因是客户三天两头的要求让我们给大屏截图,一定要最新的数据.所以我就自告奋勇研究了一下. puppeteer是一款headless浏览器,由谷歌官方维护.先看看puppeteer ...
- word表格转html后去除冗余代码
word可以另存为html文件,通过这个功能,可以快速实现网页展示word内容,特别是表格的编辑,它包含tr.td.th.rowspan.colspan等内容,直接写比较繁琐. 但word转换过来的h ...
- Grafana 利用Grafana Variables变量配置快速切换不同主机的图表数据展示
用Grafana Variables变量配置快速切换不同主机的图表数据展示 by:授客 QQ:1033553122 测试环境 需求描述 操作步骤 结果展示 测试环境 influxdb-1.5.2. ...
- 小程序实践(十一):showModal的使用
显示模态对话框,确定和取消两个选择+标题+内容的对话框 . // 编辑用户性别 tapSex:function(res){ var that = this wx.showModal({ title: ...
- Android 中使用 dlib+opencv 实现动态人脸检测
1 概述 完成 Android 相机预览功能以后,在此基础上我使用 dlib 与 opencv 库做了一个关于人脸检测的 demo.该 demo 在相机预览过程中对人脸进行实时检测,并将检测到的人脸用 ...
- SqlServer sa 用户登录失败的解决方法
一.控制面板->服务->MS SQL SERVER->登录-->本地系统帐户-->重新启动MS SQL SERVER用windows验证登陆查询分析器-->执行 s ...
- SSH鞋贸商城的设计与实现
目录 应用技术 需求分析 总体设计 项目UI展示 一.应用技术 ①SSH SSH是 struts+spring+hibernate的一个集成框架,是目前比较流行的一种Web应用程序开源框架.区别于 S ...
- Windows 下端口被占用
0. 参考 参考链接: Windows下如何查看某个端口被谁占用 1. 遇到的问题 在 Windows 下的 IDEA 中启动 Web 服务显示 8080 端口被占用,程序无法正确启动. 2. 解决 ...
- Java程序设计与数据结构导论--读后感
与我前面所读的<Java7基础教程>相比,此书不适合自学,更适合作为教材使用. 虽然此书完整覆盖了Java的知识点和数据结构的基础问题,并且对每个部分都做了基本说明.但是因为没有深入展开, ...