只需一步，快速开始
查看: 822|回复: 3
阅读权限50
在线时间 小时
签到天数: 3 天连续签到: 1 天[LV.2]正式员工
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
才可以下载或查看，没有帐号？
随着互联网的发展，从以前的简单的页面设计到js，java、css+div布局等都流行了很久，网站的前端页面让人们的视觉越来越醒目，大气，高端。2014年双11的完美落幕。以惊人的数据让马云笑开了花。而互联网再一次的走在世界前沿的风口浪尖，紧跟互联网大会第一次在乌镇召开，而移动互联网则是几个大佬们提到最多的话题，移动端是否真的像大佬们说的如爆发式的产出。织梦帮觉得移动端的页面则将要大踏步的迈入html5的时代来临。
　　而至于HTML5页面到底如何布局？该怎样布局。都是一个崭新的方向标。而HTML5的似乎一夜之间出现在国内外大大小小的网站上，比如 Pinterest (貌似是最早使用这种布局的网站了)，Mark之 ，织梦帮 ，点点网 ，以及淘宝最新上线的“哇哦 ” 等等，倒是很流行哈~ 在淘宝即将上线的众多产品中，你还会大量看到这样的形式呢。
前端开发：网站布局中的整体布局,
　　这种布局适合于小数据块，每个数据块内容相近且没有侧重。通常，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。所以，我们给这样的布局起了一个形象的名字 — 瀑布流式布局。
　　几种实现方式
　　随着越来越多设计师爱用这种布局，我们作为前端，要尽可能满足视觉/交互设计师的需求。所以，我们整理了下这种布局的几种实现方式，有三种:
　　1) 传统多列浮动。即织梦帮采用的方式，如下图所示:前端开发：织梦帮网站前端页面开发的整体布局
　　•&&各列固定宽度，并且左浮动;
　　•&&一列中的数据块为一组，列中的每个数据块依次排列即可;
　　•&&更多数据加载时，需要分别插入到不同的列上;
　　•&&线上例子 。
　　•&&布局简单，应该说没啥特别的难点;
　　•&&不用明确知道数据块高度，当数据块中有图片时，就不需要指定图片高度。
　　•&&列数固定，扩展不易，当浏览器窗口大小变化时，只能固定的x列，如果要添加一列，很难调整数据块的排列;
　　•&&滚动加载更多数据时，还要指定插入到第几列中，还是不方便。
　　2) CSS3 定义。W3C 中有讲述关于多列布局的文档 ，排列出来的样子:
前端开发：网站布局中的瀑布流式布局,织梦帮
　　•&&由 chrome/ff 浏览器直接渲染出来，可以指定容器的列个数，列间距，列中间边框，列宽度来实现;
　　#container {
-webkit-column-count: 5;
/*-webkit-column-gap: 10
-webkit-column-rule: 5px solid #333;
-webkit-column-width: 210*/
-moz-column-count: 5;
/*-moz-column-gap: 20
-moz-column-rule: 5px solid #333;
-moz-column-width: 210*/
column-count: 5;
/*column-gap: 10
column-rule: 5px solid #333;
column-width: 210*/
　　•&&column-count 为列数; column-gap 为每列间隔距离; column-rule 为间隔边线大小; column-width 为每列宽度; 当只
设置 column-width 时，浏览器窗口小于一列宽度时，列中内容自动隐藏; 当只设置 column-count 时，平均计算每列宽度，列内内容超出则隐藏; 都设了 column-count 和column-width，浏览器会根据 count 计算宽度和 width 比较，取大的那个值作为
每列宽度，然后当窗口缩小时，width 的值为每列最小宽度。这边其实很简单，简易自己尝试下，详细可参/中的说明。
　　•&&线上例子 。
　　•&&直接 CSS 定义，最方便了;
　　•&&扩展方便，直接往容器里添加内容即可。
　　•&&只有高级浏览器中才能使用;
　　•&&还有一个缺点，他的数据块排列是从上到下排列到一定高度后，再把剩余元素依次添加到下一列，这个本质上就不一样
　　•&&鉴于这两个主要缺点，注定了该方法只能局限于高端浏览器，而且，更适合于文字多栏排列。
　　3) 绝对定位。即 Pinterest ，Mark之，KISSY 采用的方式:
前端开发：网站布局中的瀑布流式布局,织梦帮
　　•&&可谓是最优的一种方案，方便添加数据内容，窗口变化，列数/数据块都会自动调整;
　　•&&线上例子 。
　　•&&需要实现知道数据块高度，如果其中包含图片，需要知道图片高度;
　　•&&JS 动态计算数据块位置，当窗口缩放频繁，可能会狂耗性能。
　　KISSY.Waterfall 实现思路
　　KISSY 的 Waterfall 组件 主要包含两个部分，一个是对现有数据块进行排列计算各自所在的位置; 二是下拉滚动时，触发
加载数据操作，并把数据添加到目标容器中。
　　1) 数据块排列，算法步骤简述下:
　　•&&初始化时，对容器中已有数据块元素进行第一次计算，需要用户给定: a，容器元素 — 以此获取容器总宽度; b，列宽
度; c，最小列数; 最终列数取的是容器宽度/列宽度和最小列数的最大值，这样保证了，当窗口很小时，仍然出现最小列数的数
　　•&&获得列数后，需要保存每个列的当前高度，这样在添加每个数据块时，才知道起始高度是多少;
　　•&&依次取容器中的所有数据块，先寻找当前高度最小的某列，之后根据列序号，确定数据块的left，top值，left 为所在列的序号乘以列宽，top 为所在列的当前高度，最后更新所在列的当前高度加上这个数据块元素的高度，至此，插入一个元素结束;
　　•&&当所有元素插入完毕后，调整容器的高度为各列最大的高度值，结束依次调整;
　　•&&性能效率上的注意点: a，如果当前正在调整中，又触发了 resize 事件，需要将上次调整暂停后执行这次调整(timedChunk 函数); b，resize 触发会很频繁，可以将回调函数缓存一段时候后执行，即当这段时间内多次触发了resize事件，但回调函数只会执行一次(见 S.buffer 函数)
　　•&&感兴趣的可以参见源码 。
　　2) 异步加载数据，前面讲的是如何对容器中已有元素进行排列，但很多情况下，还需要不断加载新数据块，为此专门设计
了一个独立的模块 KISSY.Waterfall.Loader，其实这个功能就更简单了，仅包含两个步骤:
　　•&&绑定滚动事件，并确定预加载线高度值，即滚动到哪个高度后，需要去加载数据，其实这个就是列的最小高度值，这样
当前滚动值和最小高度值比较一下即可判断出来，是否要触发加载数据;
　　•&&加载数据，为了不对数据源做太多限制，完全由使用者自己决定数据源从哪边获取和其格式，这样更好的方便用户使用。为此，该组件只提供一个load(success，end) 接口，怎样load 由用户自己去定义，而其中的 success/end，分别给出如何添加新数据(suceess 即同 addItems)/如何停止加载的接口。
a. 回帖是一种美德，也是对楼主发帖的尊重和支持;
&&&&如果通过本帖信息与他人联系，请说明来自推一把论坛！推一把微信公众号：tui18com
b. 请不要发表违反中华人民共和国法律的内容。本站所有帖子属会员个人意见，与本站立场无关.
&&&&帖子内容版权归属作者所有,如是转贴版权归属原作者所有，其他单位或个人在使用或转载帖子&&&&内容时须征得帖子作者的同意或注明内容原出处。
在线时间 小时
签到天数: 118 天连续签到: 1 天[LV.6]经理
提示: 作者被禁止或删除 内容自动屏蔽
阅读权限70
在线时间 小时
签到天数: 132 天连续签到: 1 天[LV.7]总监
这个基本没有什么太多好说的
阅读权限70
在线时间 小时
签到天数: 100 天连续签到: 1 天[LV.6]经理
学习了，还是很有用的。。织梦58
推一把微信公众号：tui18com||京公网安备
论坛事务(9:30-17:00)：
|广告合作(9:30-17:00)：
承载数据运行（|）这个博客已经过去了很久……
不过，你可以通过以下方式找到我
现在的位置:
织梦CMS后台登陆后，打开是一片空白，怎么处理？
今天玩dedecms时候发现织梦的版本号还是dedecms V5.7sp1大半年没啥变化，
于是也懒得上官网下载了，于是把之前“二次开发”的dedecms再迁移安装。
（ps：我这二次开发指的是：去除原版广告，版权信息，加入自己的“开发者”信息，更换修改的模板等等）。
安装时候照例把install目录下的 index.php.bak 改成index.php ，并删除install_lock.txt ......
一切ok后输入 后台地址 ： http://www.你的域名/dede/
记得在 hosts文件里面绑定域名哦，比如：
#这个时候，你在本地访问你的域名实际相对于 http://localhost
在输入用户名密码之后登录后台发现一片空白
一下子就心慌了，想了想由于没报错那用户名密码应该没错，页面也已经跳转了所以问题应该是出在了登录页的用户ID的识别
于是在include找到 userlogin.class.php文件，自然就想到了session函数库。
在php4.0的时候推出就给了使用者一个函数库：session函数库，靠这个函数库里的函数很方便的实现ID识别问题。
好，接下来把这个声明函数加上：
function session_register()
【上篇】【下篇】
您可能还会对这些文章感兴趣！
订阅到邮箱The page is temporarily unavailable
nginx error!
The page you are looking for is temporarily unavailable.
Please try again later.
Website Administrator
Something has triggered an error on your
This is the default error page for
nginx that is distributed with
It is located
/usr/share/nginx/html/50x.html
You should customize this error page for your own
site or edit the error_page directive in
the nginx configuration file
/etc/nginx/nginx.conf.上传时间：
专辑名称：
专辑创建者：
视频数：15
万能仿站系列教程
56官方微信
扫一扫发现精彩　　如果你是刚刚接触前端的话，想必一定没听说过织梦。如果你是初级程序员的话，想必一定想了解有关织梦的相关知识吧。那么接下来，为大家分享一下织梦的安装的小步骤吧。
　　织梦安装详细步骤：
　　1.此次安装步骤完全在环境已经搭配好的前提下进行，有关运行环境的搭配，敬请留意小编的环境配置相关经验
&&&&&&& 2.将织梦uploads文件夹下面的文件拷贝到网站根目录下，然后点击localhost便开始了织梦的安装，首先进行的是许可协议，勾选我已经阅读并同意此协议，点击继续进行下一步
　　3.阅读织梦许可协议，选择“我已经阅读并同意此协议”，然后点击继续
　　4.检查服务器是否支持以下功能。
　　5.接着就是系统环境的检测，主要看看你的系统环境是否支持织梦，一般的空间都会支持php+mysql,所以一般不会出现问题，如果遇到问题，可以找域名空间商，把对应打叉号的地方截图给他，叫他给你开启
　　6.填入相应的信息。数据库主机就是mysql的地址。数据库用户就是数据库用户名。这些信息都可以在你虚拟主机管理中的数据库中查询得到。下面用户名密码就是你登陆后台需要的用户名和密码。
　　7.安装完成
　　至此织梦的重要配置过程已经完成了，点击继续边可完成操作。好了，织梦安装过程先讲到这里哈。~
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：319867次
积分：4797
积分：4797
排名：第4406名
原创：143篇
评论：100条
文章：31篇
阅读：101246
文章：11篇
阅读：20949
文章：14篇
阅读：32364
文章：10篇
阅读：20886
文章：18篇
阅读：40917
(1)(1)(1)(4)(4)(4)(7)(20)(10)(15)(26)(22)(32)