羊皮纸 服务
       
       
      分享
       
      原创部落格 /

      让列表像瀑布一样的 Puzzle 模组

      上一篇
      下一篇
      本文
      让列表像瀑布一样的 Puzzle 模组
      利用网页元件向左飘浮的做法在网页设计界中存在了好长的一段时间,向左飘浮故名思义就是下一个元件紧接著上一个元件的左边,直到上层空间不足才会换到下一行,这样子的做法一般情况下很完美,因为他很札实的使用了每个网页的版面,那非一般的情况是什麽呢?

      当每个列表的内容物长度或大小都不相同的时侯,整个排版就会变得很好笑,有时侯是网页中间多了好几个空洞,不然就是像叠积木一样,这里一块那里一块。

      所幸有前辈想出了拼图的列表方法,因为其实我也不知道是谁想出了这个艾地儿(Idea),也不知道该叫这东东什麽名字,所以我自己给他取了 拼图(Puzzle)。

      拼图(Puzzle)列表的好处在於跟向左飘浮一样的札实的使用了每个网页的版面,而且他只要设定内容元件相同寛度,不管内容物长度,他都可以排的很整齐。

      Neil 的 拼图(Puzzle)实作方式是采用 Javascript 去修改网页元件的 CSS style 来实现,设定一组阵列来放置每行最後一个緃坐标,在所有坐标里先找出最小的,指定到元件的 style.top 值,依序处理所有的元件,後进的元件自然会补到最短的那一行。

      • 本文为原创文章, 为尊重著作权, 未经作者同意请勿任意转载
      • 关键字 : 拼图(4), Puzzle(3), 版面(2), 每个网页(2), 札实(2), 时侯(2), 使用(2), style(2), 非一般(1), 里一块(1), 采用(1), 这里一块(1), 这样子(1), 这个艾地儿(1), 谁想出(1), 网页中间多(1), 来实现(1), 整齐(1), 指定到元件(1), 所幸(1)
      00
      2013-06-06T17:29:00+0000

      发表回响
       
      验证字串

      部落格目录

      • 魚戀秋波 Neil Y.K.的部落格
        • 心情·日记
        • 创作
          • 舞动程序
            • 关键词库系统搜寻及应用设计
            • 键盘测试工具
            • 宅配物流系统
            • 中文判定及转换程式
            • 图片裁切控制介面 ScaleFrame
            • 线上名片设计程式
            • 让列表像瀑布一样的 Puzzle 模组
            • 商品特徵设定程式
            • 网路履历程式
            • 整合搜寻模组
            • 全球地理管理工具
            • 传说中 IE 消失的文字
            • 全球化地理系统
            • 网页轮播模组
            • 黑族塔罗牌阵程式
            • 英文地址转换程式英文地址转换程式
            • 黑族纸娃娃系统黑族纸娃娃系统
            • 索引地图建立工具
            • 推荐好用的文字编辑器
            • JScript 事件的共用
            • 设定 PHP 档案上传容量限制
            • 许久不见的侦错模式
            • 解决 Flash 无法在原网页开启连结
            • 雷达图产生程式
            • 相片杂凑工具
            • Facebook 网站应用
            • 自创的防木马登入网页
          • 摄影
          • 绘图
          • 文学
          • 素描
          • 水草情迷
        • 我的工作
        • 杂七杂八DIY
        • 流浪札记
        • 玩乐情报
        • 生活话题
        • 经方中医
        • 未分类

      部落格列表

      QRCode 条码 & APP 连结

      说明
      本页网址

      在相关服务标签中,『扫描条码,在行动装置』或是『点击连结按钮,在本装置』中开启网页或是 APP 相关操作。
      QRCode

      访客浏览统计

      • 访客人数 : 8,605,451
      • 浏览次数 : 8,790,154
      • 浏览深度 : 102.1 %