||  網站導覽  ||  留言版
 
  站長 x 管理人
 
  文章分類
    JAVA
    Database資料庫
    應用程式
    文書處理
    normal一般設定
    Web-design網頁設計
       JSP
       不分類
       .net framework
       asp
       php
    Virtual Machine虛擬機器
    MIS網管
    media多媒體
    未分類
 
 
 
 
「心得」瀑布流版面
 
 
 
 
前陣子要修改一個案子,
客戶要求某個列表頁是要使用瀑布流的方式
也就是每個產品圖寬度固定,但高度不定

產生的高低參雜的效果

一開始的想法是,既然寬度固定,
就弄幾大塊div,再依次丟進去

可惜事情並不如人願,
拿到的版面並不適合這樣做,
後來客戶增加的需求也註定了,更不能這樣做

最後採用絕對位置的方式
「postion:absolute;left:xxpx;top:xxpx」

該死的是要
計算圖片的寬高+等比例縮圖+計算left和top的值+
(由左至右排列+補上高度最小的)

在不考慮效能的情況下
(也沒得考慮了)

還是弄出來了

後記:
一開始還沒去爬文,只是照最直接的想法去做,
最近爬了一下後,
跟我的做法沒差多少,真的也沒啥做法可選擇,
冏冏...

結論是:
採用絕對位置的瀑布流最適合拿來搞工程師,這時的設計師相對閒著沒事
不過優點是效果最佳(效能不計)
 
 
 
 
Copyright © 2012 NBOX. All Rights Reserved.