瀑布流布局代码或者流式布局是否有了解

来源：蜘蛛抓取(WebSpider) 时间：2016-05-22 11:07 标签： 瀑布流布局代码
后使用快捷导航没有帐号？
签到成功!您已签到{days}天,签到3天可砸金蛋，多签多得，加油哦！签到日记2013-06已连续签到:{constant}天，累计签到:{days}天
今日发帖: 8174篇&&&&昨日发帖: 14452篇&&&&注册会员: 2262425人&&&&欢迎新会员: &&&&活动QQ群:&&抢楼群:(已满)&&抢楼2群
查看: 4666|回复: 1
芙蓉街办事员, 积分 855, 距离下一级还需 145 积分
& & 瀑布流布局对于网页设计师来说是在熟悉不过了，很多大型的网站布局都采用了这种模式，它的优点在于网站整体看上去很规范，错落有致。适合用户阅读，区别传统的矩阵式布局，巧妙利用层级视觉效果增加用户黏度。瀑布流布局通常情况下是扁平化的，可以把琐碎的东西结合在网页中，这样不会让人感觉错综复杂。下面合肥网页设计就给大家分享下瀑布流布局的一些技巧。
& & 瀑布流布局改变了传统的定位布局方式，采用每个单元格计算定制的方法进行布局，主要体现在计算频率高，而且准确，还可以自适应排列，减少了服务器的资源，让浏览器处理起来更加轻松。很多瀑布流布局还采用了多列浮动的布局方式，将多个单元格组成一列，这样做的好处就在于，不需要对单个元素进行定位计算，减少了一定的工作量。瀑布流布局还可以根据不同的浏览器显示模式和分辨率进行识别，然后自适应显示窗口，不会让整个网站的布局出现变形。
& & 合肥网页设计通过研究发现，瀑布流布局有助于网站的用户体验，网站中最能吸引用户的是什么了？据笔者的了解，用户对于图片是情有独钟的，不管什么样的客户都喜欢网站的整体视觉感，瀑布流布局对于图片的展示，高效而具有吸引力，用户即使在短时间内浏览，也可以将其视线锁定，瀑布流布局对于那些懒惰的用户更具说服力，可以避免用户鼠标翻页点击操作，页面中的元素会随着鼠标的滚动自动产生内容，便于用户浏览更多的信息。
& & 瀑布流布局采用了吸顶式导航布局效果，可以让用户快速的浏览网页信息。吸顶式导航不可以太宽，色彩上不可以太抢眼，只要让用户看到就行了。在设计瀑布流布局时一定要保证页面的视觉流畅，加载网页的速度一定要快，要不然网页打开半天图片还没有显示出来，用户就不会选择等下去了，这样你的布局在完美也是没有意义的。所以在瀑布流布局中要考虑到图片的大小和显示问题。
& & 合肥网页设计通过研究发现，用户都是很懒的，用户的行为都是建立在懒惰的基础上，他们不愿意过多的去点击页面和图标，基本上都是伸手党，所以设计瀑布流布局时应该多考虑用户，利用傻瓜式的显示方式帮助用户浏览网页，引导他们去了解网站的精华部分，这样的瀑布流布局才是完美的。
文章由合肥网页设计原创发布
芙蓉街办事员, 积分 855, 距离下一级还需 145 积分
效果只有尝试了才知道。
您需要登录后才可以回帖
回帖后跳转到最后一页
社区站内公告
社区活动QQ群:&&
社区抢楼群:做了一个图片的分享网站，里面用到了图片的瀑布流式布局jquery+masonry，
为了实现局部刷新，用了ajax，问题来了，局部刷新之后图片的瀑布流式布局被破坏了，见图，百思不得其解，求大神指教，可能的原因。
回复讨论(解决方案)
因为已经重新计算过位置了，再次更新并不会触发位置计算重新绘制页面，你可以在ajax更新完毕后执行下masonry方法试试看能不能重新布局。。
,success:function(){
//.....更新操作
//重新执行masonry操作
&$('#选择器').masonry({
&&&singleMode:&true,
&&&itemSelector:&'.box'
起初我也觉得是这个问题，于是我是把涉及到的脚本全部放进&updatepanel中，看更新的时候会不会一起更新（也就是你说的重新绘图），结果，失败了。。。
还没用过,学习了
起初我也觉得是这个问题，于是我是把涉及到的脚本全部放进&updatepanel中，看更新的时候会不会一起更新（也就是你说的重新绘图），结果，失败了。。。
之前没看API，其实masonry提供了方法reload【重绘】或者appended【设置新节点的位置，效率应该比reload快】的
ajax更新完毕后执行
$('#容器选择器').masonry('reload');就搞定了
$('容器选择器').masonry(&'appended',&$(' 新节点选择器'));
就行了，注意是新节点，以前布局过的不要选择，要不会布局会错乱。
不想麻烦就直接reload
刚写的一篇文章，有需要自己参考看看： 动态更新的内容如何以瀑布流masonry重新布局jquery教程之瀑布流布局的优化与缺点|jquery教程|jqueryschool-国内最大的jquery原创分享社区
热门关键字：
> jquery教程之瀑布流布局的优化与缺点
jquery教程之瀑布流布局的优化与缺点
作者：管理员发布时间： 17:33:21评论数：0
转载请自觉注明原文：
，又称瀑布流式布局，是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，最早采用此布局的网站是Pinterest，逐渐在国内流行开来，国内大多数清新站基本为这类风格。
布局的加载原理？
1、 首先加载开始显示的数据：显示方式一般是，加载列的倍数，从一个二维数组中读取列的倍数的键值（键值必须按照默认排序） 。
2、进度条往下拉时，通过js计算进度条已经过去的高度+屏幕的高度-第一条离最上面的高度-当前列已有的高度是否大于某个固定值，如果大于，证明下面没有内容了，AJAX读取数据加载。&
3、 AJAX返回的数据为多条已经加载好的HTML，添加到已有数据的底部，可以是一条或者是多条，添加到某一列下面。添加时为一行一行的还木有想到怎么加。
布局的优点与缺点？
1、布局简单，没有特别的难点。&
2、不必明确知道数据块高度，当数据块中有图片时，就不需要指定图片高度。&
1、列数固定，扩展不易，当浏览器窗口大小变化时，只能固定的x列，如果要添加一列，很难调整数据块的排列。&
2、滚动加载更多数据时，还要指定插入到第几列中，不够方便。&
3、只有高级浏览器中才能使用。&
4、数据块排列是从上到下排列到一定高度后，再把剩余元素依次添加到下一列，这个本质上就不一样了。
鉴于这些主要缺点，注定了该方法只能局限于高端浏览器，而且，更适合于文字多栏排列。
布局案例欣赏？
如果您觉得本文的内容对您的学习有所帮助：
相关文章：

我要回帖

更多关于 瀑布流布局代码 的文章

 

随机推荐