仿pinterest实现瀑布流布局效果
在张鑫旭的博客里,有一片文章介绍 瀑布流 实现的文章,(要查看演示,请单击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 '+ 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实现瀑布流布局效果相关推荐
- jQuery实现动态瀑布流布局效果
0x01 前言 今天在tumblr上看到其瀑布流布局,如下图,觉得很有意思便研究了下,发现tumblr使用position:absolute布局的. 照我之前的想法呢,是根据窗口大小,建立N条Col, ...
- 使用css3实现瀑布流布局效果
使用CSS3可以轻松实现瀑布流布局,但这种方法有个缺点,就是对于商城类型的网站,价格筛选时,并不能达到理想效果. 1.column-count 把div中的文本分为多少列 2.column-width ...
- html瀑布流布局原理,css 实现瀑布流布局效果
使用CSS3可以轻松实现瀑布流布局 1.column-count 把div中的文本分为多少列 2.column-width 规定列宽 3.column-gap 规定列间隙 4.break-inside ...
- 前端如何实现音乐盒胶盘的转动_干货来袭!web前端开发工程师必看之如何使用CSS3实现瀑布流效果?...
首先,我们来看一下什么是瀑布流布局效果,比如电商网站 蘑菇街 原理图: 在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果. 使用CSS3S实现只需要如下4步: ...
- css3 下边框缓缓划过_干货来袭!web前端开发工程师必看之如何使用CSS3实现瀑布流效果?...
首先,我们来看一下什么是瀑布流布局效果,比如电商网站 蘑菇街 原理图: 在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果. 使用CSS3S实现只需要如下4步: ...
- 图片流_干货来袭!web前端开发工程师必看之如何使用CSS3实现瀑布流效果?
首先,我们来看一下什么是瀑布流布局效果,比如电商网站 蘑菇街 原理图: 在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果. 使用CSS3S实现只需要如下4步: ...
- 什么是瀑布流布局?瀑布流布局的实现方法
网页在进行布局的时候,有时会用到一种布局方式叫做瀑布流布局,那么,瀑布流布局是什么样的呢?本篇文章将来给大家介绍一下关于瀑布流布局的实现方法. 打造全网web前端全栈资料库(总目录)看完学的更快,掌握 ...
- html瀑布流布局是什么,瀑布流布局图片与css多种实现思路剖析
一.什么是瀑布流布局 瀑布流布局在当下前端网页设计中越来越流行,主要表现形式为上下高度参差不齐的多行布局,往往图片各异大小不等却能够自动适应排成一排按行进行展示,滚动条下拉还不会不断地自动适应加载数据 ...
- 微信小程序中实现瀑布流布局和无限加载
瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感. 在HTML5中,我们可以找到很多基于jQuery之类实现的瀑布流布局插 ...
最新文章
- 批量obj格式直接转gltf
- dell服务器网卡em1改成eth0
- C# SignalR 即时通讯 聊天室
- 基于python技术的自动化运维是干嘛的_《Python自动化运维 技术与最佳实践》.pdf...
- 计算机科学与技术毕业答辩流程,计算机科学与技术学院毕业答辩工作细则
- ajax入门体会(转)
- PHP 制作通讯录(六)
- 谈PaaS平台建设:如何应对企业架构多元异构资源的挑战
- PyTorch载入图片后ToTensor解读(含PIL和OpenCV读取图片对比)
- ucc编译器(优化)
- 聊聊下一代监控:Prometheus
- 痞子衡嵌入式:ARM Cortex-M文件那些事(1)- 源文件(.c/.h/.s)
- DXUT框架剖析(13)
- 大数据分析如何应用在驾驶世界
- 常见的平面设计风格有哪些?
- Footprint Analytics:多角度理解Layer 2生态:概念、扩容方案及代表项目
- c#将PDF文件转成图片
- 解决Xcode真机测试时ineligible devices的问题
- 给未来写封信app服务器维护中,给未来写封信app
- .net 导出excel_使用 EasyPOI 优雅导出Excel模板数据(含图片)