风行一时瀑布流网页布局,实现无限加载(jquery)
今天跟大家分享一个瀑布流网页布局,先跟大家分析下实现的思路吧
主要思路:一、根据屏幕宽度和单个浮动层的宽度来确定浮动层列数
var $boxs = $("#main>div")
var boxw = $boxs.eq().outerWidth();
var clos = Math.floor($(window).width()/boxw);
$("#main").width(boxw*clos).css('margin','0 auto');
二、用绝对定位来确定浮动层的位置,在这里我的浮动层里放一个图片来展示效果
var hArr=[];
$boxs.each(function(index, element) {
var h=$boxs.eq(index).outerHeight();
if(index<clos){
hArr[index]=h;
}
else{
var minH=Math.min.apply(null,hArr);
var minHindex=$.inArray(minH,hArr);
$(element).css({
'position':'absolute',
'top':minH+'px',
'left':minHindex*boxw+'px'
})
hArr[minHindex]+=$boxs.eq(index).outerHeight();
}
三、根据屏幕显示高度+滚动条高度和最后一个浮动层的top值来确定执行滚动事件
$(window).scroll(function(){ if(checkscroll){
for(var i=;i<;i++){
var obox=$("<div>").addClass("box").appendTo($("#main"));
var opic=$("<div>").addClass("pic").appendTo($(obox));
$("<img>").attr('src','images/'+ i +".jpg").appendTo($(opic));
} waterfall();
}
})
function checkscroll(){ var lasttop=$("#main>div").last().offset().top+=Math.floor($("#main>div").last().outerHeight()/);
var scrolltop= $(window).scrollTop();
var documeth= $(window).height();
return(lasttop>scrolltop+documeth)?true:false;
}
例子请点击这里 例子(多刷新下页面看完整效果)
风行一时瀑布流网页布局,实现无限加载(jquery)的更多相关文章
- javacript 实现瀑布流原理和效果, 滚动加载图片【图文解析 附源码】
先科普下瀑布流吧 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pin ...
- jquery/原生js/css3 实现瀑布流以及下拉底部加载
思路: style: <style type="text/css"> body,html{ margin:; padding:; } #container{ posit ...
- Android RecyclerView 瀑布流滑动到最后自动加载更多
mRecycleView.setOnScrollListener(new RecyclerView.OnScrollListener(){ //用来标记是否正在向最后一个滑动,既是否向下滑动 bool ...
- jQuery实现无限加载瀑布流特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 基于jquery响应式网站图片无限加载瀑布流布局
分享一款效果非常酷的jQuery瀑布流布局无限加载图片效果.整个页面采用响应式布局,图片采用jQuery.Lazyload延时加载技术,提升整个页面的加载速度.效果图如下: 在线预览 源码下载 实 ...
- CSS3学习总结——实现瀑布流布局与无限加载图片相册
首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...
- Node JS爬虫:爬取瀑布流网页高清图
原文链接:Node JS爬虫:爬取瀑布流网页高清图 静态为主的网页往往用get方法就能获取页面所有内容.动态网页即异步请求数据的网页则需要用浏览器加载完成后再进行抓取.本文介绍了如何连续爬取瀑布流网页 ...
- 关于瀑布流的布局原理分析(纯CSS瀑布流与JS瀑布流)
瀑布流 又称瀑布流式布局,是比较流行的一种网站页面布局方式.即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置. 为什么使用瀑 ...
- Qt实现小功能之列表无限加载
概念介绍 无限加载与瀑布流的结合在Web前端开发中的效果非常新颖,对于网页内容具备较好的表现形式.无限加载并没有一次性将内容全部加载进来,而是通过监听滚动条事件来刷新内容的.当用户往下拖动滚动条或使用 ...
随机推荐
- asp.net textbox控件基础
asp.net有两种控件,一种是html控件,一种是asp控件,在说textbox控件之前,先看看按钮的两个命令oncommand和onclick.每次点击按钮后,都会提交命令,但是程序会首先执行Pa ...
- 20151226--easyUI
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- C++ Builder平台使用Indy9开发自动FTP程序01
Indy9与CB自带的Indy8不同处还是挺多的.首先就是图标变漂亮了,其次很多Method都重写了.它主要是依据Delph里的函数,力求与之相通.不同点在本系列的后续章节中会一一介绍. 在写ftp代 ...
- Linux学习之lsof命令
lsof(list open files)是一个列出当前系统打开文件的工具.在linux环境下,任何事物都以文件的形式存在,通过文件不仅仅可以访问常规数据,还可以访问网络连接和硬件.所以如传输控制协议 ...
- emoji表情字符串 mysql 普通 utf8 格式无法存入
处理方法: 1.在可以忽略emoji表情的情况下,可以选择将emoji表情字符过滤掉,这样不用动mysql 表结构 过滤Java代码参考如下: public static String filt ...
- 事件绑定之.bind()
.bind(eventType[,eventData],handler(eventObject)) 描述:为一个元素绑定一个事件处理程序,bind()绑定方法的时候元素必须已经存在. -eventTy ...
- 练习-checkbox 全选 ,反选, 单选,以及取值
1.方法1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w ...
- nodejs 下载网页及相关资源文件
功能其实很见简单,通过 phantomjs.exe 采集 url 加载的资源,通过子进程的方式,启动nodejs 加载所有的资源,对于css的资源,匹配css内容,下载里面的url资源 当然功能还是很 ...
- silverlight imagesource赋值与转换
介绍几种常用的Image source 赋值方式: this.abc.Source = new BitmapImage(new Uri("/1.jpg", UriKind.Rela ...
- [LeetCode]题解(python):153-Find Minimum in Rotated Sorted Array
题目来源: https://leetcode.com/problems/find-minimum-in-rotated-sorted-array/ 题意分析: 在一个不重复的翻转的数组里面找到最小那个 ...