在asp.net中使用瀑布流，无限加载
页面中代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="waterfall.WebForm1" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/main.css" rel="stylesheet" />
<link href="css/reset.css" rel="stylesheet" /> </head>
<body>
<form id="form1" runat="server">
<div id="container">
<header>
<h1>Wookmark测试</h1>
<p>往下拉，就能看到效果</p>
</header>
<div id="main" role="main">
<ul id="tiles">
<li>
<img src="data:images/image_1.jpg" width="" height="" alt="">
<p>图片描述1</p>
</li>
<li>
<img src="data:images/image_2.jpg" width="" height="" alt="">
<p>图片描述2</p>
</li>
<li>
<img src="data:images/image_3.jpg" width="" height="" alt="">
<p>图片描述3</p>
</li>
<li>
<img src="data:images/image_1.jpg" width="" height="" alt="">
<p>图片描述4</p>
</li>
<li>
<img src="data:images/image_2.jpg" width="" height="" alt="">
<p>图片描述5</p>
</li>
<li>
<img src="data:images/image_3.jpg" width="" height="" alt="">
<p>图片描述6</p>
</li>
<li>
<img src="data:images/image_1.jpg" width="" height="" alt="">
<p>图片描述7</p>
</li>
<li>
<img src="data:images/image_2.jpg" width="" height="" alt="">
<p>图片描述8</p>
</li>
<li>
<img src="data:images/image_3.jpg" width="" height="" alt="">
<p>图片描述9</p>
</li>
<li>
<img src="data:images/image_1.jpg" width="" height="" alt="">
<p>图片描述10</p>
</li>
</ul>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.imagesloaded.js"></script>
<script src="js/jquery.wookmark.js"></script>
<!-- Once the page is loaded, initalize the plug-in. -->
<script type="text/javascript">
(function ($) {
$('#tiles').imagesLoaded(function () {
var handler = null; // Prepare layout options.
var options = {
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $('#main'), // Optional, used for some extra CSS styling
offset: , // Optional, the distance between grid items
itemWidth: // Optional, the width of a grid item
}; function applyLayout() {
$('#tiles').imagesLoaded(function () {
// Destroy the old handler
if (handler.wookmarkInstance) {
handler.wookmarkInstance.clear();
} // Create a new layout handler.
handler = $('#tiles li');
handler.wookmark(options);
});
} /**
* When scrolled all the way to the bottom, add more tiles.
*/
function onScroll(event) {
// Check if we're within 100 pixels of the bottom edge of the broser window.
var winHeight = window.innerHeight ? window.innerHeight : $(window).height(); // iphone fix
var closeToBottom = ($(window).scrollTop() + winHeight > $(document).height() - );
//异步请求
if (closeToBottom) {
$.ajax({
type: 'get',
url: 'LoadImages.ashx',
async: 'true',
data: { getPage: page },
success: function (result) {
$('#tiles').append(result);
applyLayout();
InitImage();
page = page + ;
}
}); }
}; // Capture scroll event.
$(window).bind('scroll', onScroll); // Call the layout function.
handler = $('#tiles li');
handler.wookmark(options);
});
})(jQuery); </script>
<script type="text/javascript">
var page = ; function InitImage() { $("#tiles li p").hide();
$("#tiles li").hover(function () {
$(this).children().last().show();
}, function () {
$(this).children().last().hide();
});
} InitImage();
</script>
</form>
</body>
</html>
需要配置的一般处理程序，接收ajax请求
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web; namespace waterfall
{
/// <summary>
/// LoadImages 的摘要说明
/// </summary>
public class LoadImages : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
Random rd = new Random(); int page = int.Parse(context.Request.QueryString["getPage"]);
StringBuilder sb = new StringBuilder();
const string html = "<li><img src=\"images/image_@imgIndex@.jpg\" width=\"200\" height=\"300\"><p>@page@</p></li>";
for (int i = ; i < ; i++)
{
sb.Append(html.Replace("@page@", (page* + i).ToString()).Replace("@imgIndex@",rd.Next(,).ToString()));
}
context.Response.Write(sb.ToString());
} public bool IsReusable
{
get
{
return false;
}
}
}
}
wookmark下载地址：点击这里下载
demo下载：点击这里下载
在asp.net中使用瀑布流，无限加载的更多相关文章
- 瀑布流无限加载infinitescroll插件与masonry插件使用
masonry官网地址http://masonry.desandro.com/,infinitescroll官网地址http://www.infinite-scroll.com/ 无限滚动原理:无限滚 ...
- jQuery瀑布流+无限加载图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js实现瀑布流以及加载效果
一.瀑布流是个啥? 瀑布流,是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部. 最早采用瀑布流布局的网站是Pinteres ...
- jQuery8种不同的瀑布流懒加载loading效果
优化图片加载插件jQuery8种不同的瀑布流懒加载loading效果 在线预览 下载地址 实例代码 <ul class="grid effect-1" id="g ...
- asp.net中TreeView的大数据加载速度优化
由于数据量太大,加载树时间很长,所以进行了优化 前台 .aspx <asp:Panel ID="Panel2" runat="server" Height ...
- 基于jquery响应式网站图片无限加载瀑布流布局
分享一款效果非常酷的jQuery瀑布流布局无限加载图片效果.整个页面采用响应式布局,图片采用jQuery.Lazyload延时加载技术,提升整个页面的加载速度.效果图如下: 在线预览 源码下载 实 ...
- jQuery实现无限加载瀑布流特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html中的瀑布流是什么
html中的瀑布流是什么 一.总结 1.瀑布流: 从左往右排列,哪一列现在的总高度最小,就优先排序把item(单元格)放在这一列.这样排完所有的单元格后,可以保证每一列的总高度都相差不大 2.看效果图 ...
- CSS3学习总结——实现瀑布流布局与无限加载图片相册
首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...
随机推荐
- 第三百九十二节，Django+Xadmin打造上线标准的在线教育平台—sql注入攻击,xss攻击,csrf攻击
第三百九十二节,Django+Xadmin打造上线标准的在线教育平台—sql注入攻击,xss攻击,csrf攻击 sql注入攻击 也就是黑客通过表单提交的地方,在表单里输入了sql语句,就是通过SQL语 ...
- extern、static、restrict、volatile 关键字
extern extern的两个作用: 修饰变量或函数,提示编译器此变量或函数是在其它文件中定义的,但要在此处引用: 进行链接指定,如: extern "C" void fun(i ...
- 仿迅雷播放器教程 -- C++ windows界面库对比(11)
从上一篇文章中可以看出,C++的界面方向还很弱,没有任何一个界面库可以一统天下,所以才造成了界面库百家争鸣的情况. 从时间上看: 1.出来最早的是QT,1991年就有了. 2.VC++ 虽然1992年 ...
- oracle 数据库对于多列求最大值
1.案例: SELECT GREATEST('36', '55', '34') V_MAX, LEAST('36', '55', '34') V_MIN FROM DUAL Oracle比较一列的最大 ...
- python使用上下文对代码片段进行计时，非装饰器
之前发过了一组常用的装饰器,包括了一个where_is_it_called的装饰器,可以计时和对入参和返回结果,被何处调用进行记录,十分强大. 这是用上下文,上下文的好处是,不需要抽成函数才能计时. ...
- mysql 导入excel文件数据到数据库
load data local infile 'C:/Users/Administrator/Documents/gaunai2.csv' into table newtable (c1,c2) fi ...
- Git 学习笔记--拉取远程分支到本地
1.查看远程分支,和上面的第一步相同2. 从远程获取最新版本到本地 git fetch origin master:temp git fetch origin master:temp 这句命令的意思是 ...
- c++ typedef和#define的作用范围
typedef: 如果放在所有函数之外,它的作用域就是从它定义开始直到文件尾: 如果放在某个函数内,定义域就是从定义开始直到该函数结尾: #define: 不管是在某个函数内,还是在所有函数之外,作用 ...
- 一、K3 Wise 实施指导《K3 Wise实施手册》
1.总账期间启用后无法修改.固定资产期间启用后无法修改 ----修改总账 ' where fcategory='GL' and Fkey='startyear' --修改启用期间 ' where fc ...
- sencha touch 带本地搜索功能的selectfield(选择插件)
带本地搜索功能的选择插件,效果图: 在使用selectfield的过程中,数据过大时,数据加载缓慢,没有模糊查询用户体验也不好, 在selectfield的基础上上稍作修改而成,使用方式同select ...