羊皮紙 服務
       
       
      分享
       
      原創部落格 /

      讓列表像瀑布一樣的 Puzzle 模組

      上一篇
      下一篇
      本文
      讓列表像瀑布一樣的 Puzzle 模組
      利用網頁元件向左飄浮的做法在網頁設計界中存在了好長的一段時間,向左飄浮故名思義就是下一個元件緊接著上一個元件的左邊,直到上層空間不足才會換到下一行,這樣子的做法一般情況下很完美,因為他很札實的使用了每個網頁的版面,那非一般的情況是什麼呢?

      當每個列表的內容物長度或大小都不相同的時侯,整個排版就會變得很好笑,有時侯是網頁中間多了好幾個空洞,不然就是像疊積木一樣,這裡一塊那裡一塊。

      所幸有前輩想出了拼圖的列表方法,因為其實我也不知道是誰想出了這個艾地兒(Idea),也不知道該叫這東東什麼名字,所以我自己給他取了 拼圖(Puzzle)。

      拼圖(Puzzle)列表的好處在於跟向左飄浮一樣的札實的使用了每個網頁的版面,而且他只要設定內容元件相同寛度,不管內容物長度,他都可以排的很整齊。

      Neil 的 拼圖(Puzzle)實作方式是採用 Javascript 去修改網頁元件的 CSS style 來實現,設定一組陣列來放置每行最後一個緃坐標,在所有坐標裡先找出最小的,指定到元件的 style.top 值,依序處理所有的元件,後進的元件自然會補到最短的那一行。

      • 本文為原創文章, 為尊重著作權, 未經作者同意請勿任意轉載
      • 關鍵字 : 拼圖(4), Puzzle(3), 網頁(2), 版面(2), 札實(2), 列表(2), 元件(2), 使用(2), style(2), 非一般(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 %