在 JQuery Mobile 中实现瀑布流图库布局

先来看在Windows系统的1080P显示器中显示的效果：

这个整合方式几乎没有现存的实例，是自己总结出来的方法，在此记录下来。

首先访问Masonry官网下载masonry.pkgd.min.js：http://masonry.desandro.com/

将其整合到项目中，在页面中引入。

初始化id变量，让页面每次加载时的id都不同，避免 Ajax 加载时id重复造成难以察觉的错误。

var id = "gallerycontent" + Guid.NewGuid();

采用HTML初始化方式进行初始化：

<div id="@id" style="margin: 50px auto;" class="js-masonry" data-masonry-options='{ "isFitWidth": true, "itemSelector": ".post" }'>
....
....
....
</div>

以上为外部容器代码。id属性使用前面的变量；style属性和后面的isFitWidth选项共同实现了容器自动水平方向居中功能；我没有像Masonry入门教程那样指定列宽选项，我觉得貌似对我的项目没什么用，通过css盒模型即可较好地控制图片区块的列宽和间距。

内部图片区块的伪代码：

<div class="post" style="height:@(260/1.0/image1.宽度*image1.高度)px"><a data-ajax="true" href="@image1.大图地址"><img src="@image1.小图地址" width="260" /></a>
</div><div class="post" style="height:@(260/1.0/image2.宽度*image2.高度)px"><a data-ajax="true" href="@image2.大图地址"><img src="@image2.小图地址" width="260" /></a>
</div>............

class对应初始化选项里的itemSelector选项；源图片尺寸是不规则的，将img的width强制设为260，这样图片的高度会自动等比变化；经我测试，想要正常显示就必须明确设置每个区块的高度，由于几乎不做前端开发，对于普通页面我真不知道怎么获取源图像的尺寸，好在我的项目中图像的尺寸都在上传时一并记录到数据库中了，这里只要获取其尺寸并进行简单的等比缩放运算，并写到style属性中就行了。

css文件中post类的定义：

.post {margin: 10px;padding: 5px;border: solid;border-width: 2px;border-color: #e4e4e4;-webkit-border-radius:5px;-moz-border-radius:5px;
}.post img {border: 0;
}

主要就是控制了区块间距，并模拟了圆角照片效果，呈现效果如下：

至此你就能得到一个漂亮的瀑布流图库页面了。

但是有一个问题，如果你在页面切换时使用的 JQuery Mobile 的整页 Ajax 功能，即将超链接标记的属性设为“data-ajax="true"”，那么在 Ajax 加载后的页面是不会应用瀑布流效果的。

为了解决这一问题，我做了不少测试，最终确定了这样一个方法：

<script type="text/javascript">$(document).on("pagechange", function (event) {$("#@id").masonry({itemSelector: ".post",isFitWidth: true});});</script>

在瀑布流容器的底下加入上面这个JS代码块，让其随着 Ajax 加载而执行，以注册pagechange事件，并在事件发生时再初始化瀑布流效果。

pagechange事件是我测试得出的最佳应用时机，过早应用瀑布流效果的话，页面布局还没有完成，无法正确获取页面宽度，会导致瀑布流变成一列垂直排下。

但是pagechange事件发生的确实比较晚，Ajax 加载时我们会清楚地看到图片区块先是按没有布局修饰的形象显示出来，然后又变成我们所需要的瀑布流效果，这是非常糟糕的，为此我们对内嵌的JS代码做出这样的调整：

$("#@id").fadeTo(0, 0);$(document).on("pagechange", function (event) {$("#@id").masonry({itemSelector: ".post",isFitWidth: true});$("#@id").fadeTo(0, 1);});

也就是在加载时先将其不透明度设为0，在应用了瀑布流之后再将其设回100%，这样看起来就完全没问题了。

至此全部完成。

此瀑布流布局会随着窗口尺寸变化而随时改变，在不同尺寸的设备上都有较优的布局呈现。

以下是在同为1080P分辨率的10寸Android平板上的显示效果：

以下是在近1080P分辨率（1800*1080）的5寸Android手机屏幕上的显示效果：

转载于:https://www.cnblogs.com/SkyD/p/3985976.html

在 JQuery Mobile 中实现瀑布流图库布局相关推荐

用 jQuery Masonry 插件创建瀑布流式的页面(转)
瀑布流式的页面,最早我是在国外的一个叫 Pinterest 的网站上看到,这个网站爆发,后来国内的很多网站也使用了这种瀑布流方式来展示页面(我不太喜欢瀑布流这个名字). 我们可以使用 jQuery 的 ...
jQuery实现响应式瀑布流效果（jQuery+flex）
瀑布流原理:是一种常见的网页布局方式,它的特点是将内容以多列的形式呈现,每一列的内容高度不固定,根据内容的大小自适应调整,从而形成了像瀑布一样的流动效果. 瀑布流的实现原理涉及到数据加 ...
web上渐进使用jQuery Mobile中animate相关CSS
一.关于animate.css 在介绍主人公之前,先说说他的亲戚. 有个叫"蛋一灯(Dan Eden)"的人弄了个名叫animate.css的开源项目,实际上就是使用CSS3 an ...
html流式布局插件,Jquery瀑布流网格布局插件
插件描述:一款简单且高度可定制的jQuery瀑布流网格布局插件.通过该瀑布流网格插件你可以动态添加和删除各种尺寸的图片,定义图片宽度,设置网格的列数,或使用流式布局方式,甚至还可以通过URL动态添加图 ...
jQuery Mobile中jQuery.mobile.changePage方法使用详解
jQuery.mobile.changePage方法用的还是很多的.作为一个老手,有必要对jQuery mobile中实用方法做一些总结.系列文章请看jQuery Mobile专栏.jquery.mo ...
html中的瀑布流是什么
html中的瀑布流是什么一.总结 1.瀑布流: 从左往右排列,哪一列现在的总高度最小,就优先排序把item(单元格)放在这一列.这样排完所有的单元格后,可以保证每一列的总高度都相差不大 2.看效果图 ...
JQuery Mobile中特有事件和方法
JQuery Mobile中特有事件和方法是本文要介绍的内容,主要是来了解JQuery Mobile中的事件和方法的应用,具体内容来看本文详解. 1.触摸屏事件-- Touch events tap ...
jQuery Mobile中的页面加载与跳转机制
第一次做用jQuery Mobile做东西,发现一些跟平时的思维习惯不太一样的.其中这个框架的页面加载机制便是其中一个.如果不明白其中的奥秘,往往会出现一些让人摸不着头脑的怪现象,比如页面进入后点击按 ...
jQuery Mobile中面板panel的data-*选项
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有data-*选项 jQuery Mobile中面板panel的data-*选项带有 data-role="panel&q ...

在 JQuery Mobile 中实现瀑布流图库布局

在 JQuery Mobile 中实现瀑布流图库布局相关推荐

最新文章

热门文章