在张鑫旭的博客里,有一片文章介绍 瀑布流 实现的文章,(要查看演示,请单击DEMO)本文是在其基础上进行的二次开发,使其更具实用性。

这里,主要涉及数据从数据库里读取,单击图片可以缩放等。

本文附件附带的源代码,有兴趣可以下载看看

下载的程序打开pic.aspx页面显示图片列表(您需要手动输入测试数据)。

单击图片会出现缩放等,除此外,还可以分页,(排序),以及设置页面大小等。

下面介绍本程序的大致实现。

1.建立数据库

见附件里SQL.txt,为了使得效果更明显,需要输入测试数据,越多越好

2.返回JSON数据 (ajax_getpics.aspx 页面)

返回数据使用了自定义分页,这里使用了SQL2005+上的Row_Number()函数。在GetData里,还有3个参数:orderby设置数据排序方式(一般网站的图片,都会让用户按照最新上传,点击率,回复率排序),预留这个参数就是为了解决这个问题。

pageIndex是通过传递的URL来获取的,也就是用户访问了第几页

pageSize设置页面的大小,在本演示中,设置了200.

        public DataTable GetData(){string orderBy = "pic_id";int pageIndex = int.Parse(Request["pageIndex"]);int pageSize = int.Parse(Request["pageSize"]);string sql = @"
declare @startRowIndex int
set @pageIndex=@pageIndex-1
set @startRowIndex=@pageIndex*@pageSize+1;WITH PICList AS
( select pic_id,user_id,orginpath,description,thumpath, commpeople,click,ROW_NUMBER() OVER (ORDER BY pic_id DESC) as RowNum FROM    love_pics where isapproved=1
)Select * from  PICList WHERE RowNum BETWEEN @startRowIndex AND (@startRowIndex + @pageSize-1)  order by " + orderBy + @" desc " ;DataTable ds = new DataTable();SqlConnection conn = new SqlConnection(System.Web.Configuration.WebConfigurationManager.ConnectionStrings["con"].ConnectionString);SqlCommand dCmd = new SqlCommand();dCmd.Parameters.AddWithValue("@pageIndex", pageIndex);dCmd.Parameters.AddWithValue("@pageSize", pageSize);dCmd.Parameters.AddWithValue("@orderBy", orderBy);dCmd.CommandText = sql;dCmd.Connection = conn;SqlDataAdapter da = new SqlDataAdapter();da.SelectCommand = dCmd;da.Fill(ds);return ds;}

3.制作瀑布页面 pic.aspx

在开始前,我们先定义一个页面大小pageSize和自定义分页的实现。关于Pagination可以参考源代码里具体实现。

  public int pageindex = 1;protected void Page_Load(object sender, EventArgs e){if (!string.IsNullOrEmpty(Request.QueryString["currentpage"])){pageindex = int.Parse(Request.QueryString["currentpage"]);}string sql = " Select count(*) from love_pics where isapproved=1 ";// string i = DBHelper.Instance.ExeScalar(sql).ToString();string i = "1000";//执行上面SQL语句,即可返回记录说,这里使用了硬编码,加上是100页//附带的1=1只是用于演示如何自带参数litPaging2.Text = litPaging1.Text = Pagination(int.Parse(i), 200, pageindex, "pic.aspx?1=1&");}

4.获取JSON返回的数据,也就是用JQuery的getJSON,没设么特别的,其中pageindex是我们后台定义的页码。 后面自动跟了一个random是因为

js在请求时,即使你刷新页面,但是如果参数不变那么他自动使用本地缓存,所以加上random使得每次请求参数都是变更的

var pics=new Array()var ids=new Array();var intros=new Array(); var uids=new Array();
var clicks=new Array();
var comms=new Array();$.getJSON('ajax_getpics.aspx',{ pageIndex: <%=pageindex%>, PageSize: "200", random: Math.random() },function (data) {$.each(data, function (i, entry) {pics[i]=entry['orginpath'];ids[i]=entry["pic_id"];intros[i]=entry["description"];uids[i]=entry["user_id"];clicks[i]=entry["click"];comms[i]=entry["commpeople"];});//do detect

瀑布页码代码,这个代码是在页码加载完毕后加载的,因为刚才说过需要增加单击图片时,弹出预览大图的效果,所以这里使用了highslide插件

因此代码里增加了下图红色的标记

 // 页面加载初始创建create: function () {this.columnNumber = Math.floor(document.body.clientWidth / this.columnWidth);var start = 0, htmlColumn = '', self = this;for (start; start < this.columnNumber; start += 1) {htmlColumn = htmlColumn + '<span id="waterFallColumn_' + start + '" class="column" style="width:' + this.columnWidth + 'px;">' +function () {var html = '', i = 0;for (i = 0; i < 5; i += 1) {self.indexImage = start + self.columnNumber * i;var index = self.getIndex();html = html + '   <a class="highslide pic_a" οnclick="return hs.expand(this)" href='+index+'  ><img src=' + index+' /><strong>'+self.getIntro().substring(0,50)+'</strong>  <br> <span class=pro> '+self.getClick()+' click &nbsp;&nbsp;&nbsp;&nbsp; '+ self.getComm()+' comment </span> </a><div class="highslide-caption">'+self.getIntro()+' <a target=_blank href=userinfo.aspx?id='+self.getUid()+'>查看用户</a> |  <a  target=_blank href=picdetail.aspx?pid='+self.getId()+'>查看图片('+self.getClick()+')</a> </div> ';}return html;} () +'</span> ';}htmlColumn += '<span id="waterFallDetect" class="column" style="width:' + this.columnWidth + 'px;"></span>';this.container.innerHTML = htmlColumn;this.detectLeft = document.getElementById("waterFallDetect").offsetLeft;return this;},

当页码滚动时,动态加载图片

        // 滚动载入append: function (column) {this.indexImage += 1;var html = '',  index = this.getIndex(),  imgUrl = index;// 图片尺寸var aEle = document.createElement("div");aEle.className = "pic_a";aEle.innerHTML = ' <a class="highslide pic_a" οnclick="return hs.expand(this)" href='+imgUrl+'><img src=' + imgUrl + ' /><strong>'+this.getIntro()+'</strong></a>';column.appendChild(aEle);if (this.indexImage >= 200) {this.loadFinish = true;}return this;},

这样,一个比较完成的例子就完成了。 下载源代码

仿pinterest实现瀑布流布局效果相关推荐

  1. jQuery实现动态瀑布流布局效果

    0x01 前言 今天在tumblr上看到其瀑布流布局,如下图,觉得很有意思便研究了下,发现tumblr使用position:absolute布局的. 照我之前的想法呢,是根据窗口大小,建立N条Col, ...

  2. 使用css3实现瀑布流布局效果

    使用CSS3可以轻松实现瀑布流布局,但这种方法有个缺点,就是对于商城类型的网站,价格筛选时,并不能达到理想效果. 1.column-count 把div中的文本分为多少列 2.column-width ...

  3. html瀑布流布局原理,css 实现瀑布流布局效果

    使用CSS3可以轻松实现瀑布流布局 1.column-count 把div中的文本分为多少列 2.column-width 规定列宽 3.column-gap 规定列间隙 4.break-inside ...

  4. 前端如何实现音乐盒胶盘的转动_干货来袭!web前端开发工程师必看之如何使用CSS3实现瀑布流效果?...

    首先,我们来看一下什么是瀑布流布局效果,比如电商网站 蘑菇街 原理图: 在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果. 使用CSS3S实现只需要如下4步: ...

  5. css3 下边框缓缓划过_干货来袭!web前端开发工程师必看之如何使用CSS3实现瀑布流效果?...

    首先,我们来看一下什么是瀑布流布局效果,比如电商网站 蘑菇街 原理图: 在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果. 使用CSS3S实现只需要如下4步: ...

  6. 图片流_干货来袭!web前端开发工程师必看之如何使用CSS3实现瀑布流效果?

    首先,我们来看一下什么是瀑布流布局效果,比如电商网站 蘑菇街 原理图: 在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果. 使用CSS3S实现只需要如下4步: ...

  7. 什么是瀑布流布局?瀑布流布局的实现方法

    网页在进行布局的时候,有时会用到一种布局方式叫做瀑布流布局,那么,瀑布流布局是什么样的呢?本篇文章将来给大家介绍一下关于瀑布流布局的实现方法. 打造全网web前端全栈资料库(总目录)看完学的更快,掌握 ...

  8. html瀑布流布局是什么,瀑布流布局图片与css多种实现思路剖析

    一.什么是瀑布流布局 瀑布流布局在当下前端网页设计中越来越流行,主要表现形式为上下高度参差不齐的多行布局,往往图片各异大小不等却能够自动适应排成一排按行进行展示,滚动条下拉还不会不断地自动适应加载数据 ...

  9. 微信小程序中实现瀑布流布局和无限加载

    瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感. 在HTML5中,我们可以找到很多基于jQuery之类实现的瀑布流布局插 ...

最新文章

  1. 批量obj格式直接转gltf
  2. dell服务器网卡em1改成eth0
  3. C# SignalR 即时通讯 聊天室
  4. 基于python技术的自动化运维是干嘛的_《Python自动化运维 技术与最佳实践》.pdf...
  5. 计算机科学与技术毕业答辩流程,计算机科学与技术学院毕业答辩工作细则
  6. ajax入门体会(转)
  7. PHP 制作通讯录(六)
  8. 谈PaaS平台建设:如何应对企业架构多元异构资源的挑战
  9. PyTorch载入图片后ToTensor解读(含PIL和OpenCV读取图片对比)
  10. ucc编译器(优化)
  11. 聊聊下一代监控:Prometheus
  12. 痞子衡嵌入式:ARM Cortex-M文件那些事(1)- 源文件(.c/.h/.s)
  13. DXUT框架剖析(13)
  14. 大数据分析如何应用在驾驶世界
  15. 常见的平面设计风格有哪些?
  16. Footprint Analytics:多角度理解Layer 2生态:概念、扩容方案及代表项目
  17. c#将PDF文件转成图片
  18. 解决Xcode真机测试时ineligible devices的问题
  19. 给未来写封信app服务器维护中,给未来写封信app
  20. .net 导出excel_使用 EasyPOI 优雅导出Excel模板数据(含图片)

热门文章

  1. 蓝桥杯Web应用开发
  2. 鲍尔默:微软移动业务需要寻找新方向
  3. 2016蓝桥杯报纸页数(C++C组)
  4. BAD_POOL_CALLER蓝屏故障
  5. delphi源码转换为C++ Builder源码
  6. 当当李国庆谈“刘强东案”:虽煞风景,但划得来
  7. git基于某个Tag修改提交
  8. 微型计算机的储存体系如何,存储体系结构
  9. 唐骏:身价10亿不买房 每月12万住宾馆
  10. 80后的17条潜规则,你占了几条?