課程
/前端開發
/JavaScript
/瀑布流布局
是不是pic的div是多余的呢!一個box的div就可以添加class=pic的div樣式呢?
2017-02-21
源自:瀑布流布局 2-1
正在回答
不建議這樣,你看到的效果圖,圖片邊框與邊框的距離,看起來像margin,可以用className為box直接實現,但是老師沒有這樣做,而是加了className為pic的div,然后在box里面設置padding來實現的,因為后面需要通過實際寬度來計算列數,用box的padding實現的話,box的寬度就是offsetWidth,或者jq的outerWidth(),計算列數直接用clientWidth/offsetWidth就可以了(當然取整要的);如果用margin來設置這個隔開的間距,那么后面就不能直接用offsetWidth,或者jq的outerWidth(),因為他們的計算方法不包括margin的值,而包括padding的值,所以老師在box里面又加了pic,通過padding制造了一個margin的效果。紅線的邊框是我后來加的,方便看:其實box與box之間沒有margin,而是通過padding實現的看似margin的效果。如果要去掉pic,通過box的margin實現,計算列數就要clientWidth/(offsetWidth+兩個margin),然而用js獲取這個margin值我不會,,,你會么?我要先定義下,answer.style.marginLeft ="200px";然后通過parseInt(answer.style.marginLeft)才能取出來
White_Mink 提問者
ANGELAMABY_
舉報
瀑布流布局是網站比較流行的一種布局方式,教你實現三大方式
1 回答瀑布流布局里面JQ,var $boxs=$("#main>div"); 可以等于 var $box=$(".box")不是直接有類選擇器么
3 回答獲得class為box的所有元素
1 回答關于獲取class為box的盒子
1 回答第12行 為什么我在setTimeout里面創建class為loading的div,不會跟著在后面顯示?
3 回答$box與$(box)的區別
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2017-02-22
不建議這樣,你看到的效果圖,圖片邊框與邊框的距離,看起來像margin,可以用className為box直接實現,但是老師沒有這樣做,而是加了className為pic的div,然后在box里面設置padding來實現的,因為后面需要通過實際寬度來計算列數,用box的padding實現的話,box的寬度就是offsetWidth,或者jq的outerWidth(),計算列數直接用clientWidth/offsetWidth就可以了(當然取整要的);如果用margin來設置這個隔開的間距,那么后面就不能直接用offsetWidth,或者jq的outerWidth(),因為他們的計算方法不包括margin的值,而包括padding的值,所以老師在box里面又加了pic,通過padding制造了一個margin的效果。紅線的邊框是我后來加的,方便看:其實box與box之間沒有margin,而是通過padding實現的看似margin的效果。如果要去掉pic,通過box的margin實現,計算列數就要clientWidth/(offsetWidth+兩個margin),然而用js獲取這個margin值我不會,,,你會么?我要先定義下,answer.style.marginLeft ="200px";然后通過parseInt(answer.style.marginLeft)才能取出來