資訊專欄INFORMATION COLUMN
摘要：實現可伸縮的圖片墻中文指南作者簡介是推出的一個天挑戰。現在你看到的是這系列指南的第篇。完整指南在從零到壹全棧部落。實現效果點擊任意一張圖片，圖片展開，同時從圖片上下兩方分別移入文字。
Day05 - Flex 實現可伸縮的圖片墻 中文指南
實現效果作者：?liyuechun
簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰。項目免費提供了 30 個視頻教程、30 個挑戰的起始文檔和 30 個挑戰解決方案源代碼。目的是幫助人們用純 JavaScript 來寫東西，不借助框架和庫，也不使用編譯器和引用。現在你看到的是這系列指南的第 5 篇。完整指南在 從零到壹全棧部落。
點擊任意一張圖片，圖片展開，同時從圖片上下兩方分別移入文字。點擊已經展開的圖片后，圖片被壓縮，同時該圖片上下兩端的文字被擠走。
HTML源碼Hey
Let"s
Dance
Give
Take
Receive
Experience
It
Today
Give
All
You can
Life
In
Motion
初始文檔的 DOM 結構：以 .panels 為父 div 之下，有 5 個類名為 .panel 的 div，這 5 個各含有 3 個子 p 標簽。而相應的 CSS 樣式中，動畫時間等特性已經設定好，只需要完成不同狀態下的頁面布局以及事件監聽即可。
CSS 源碼CSS 在這個過程中占了重點，運用 flex 可以使各個元素按一定比例占據頁面。在調試的時候，可以把邊框顯示出來方便查看效果。（border: 1px solid #f00;）
將 .panels 設置為 display:flex
設定每個子 panel 的 flex 值為 1
針對每個子 panel，設為 display:flex，設置其 flex 主軸方向
控制 .panle 的子元素
中的文字垂直、水平居中（多帶帶看每個 panel，其中的文字也可以用 flex 的思路來使其三等分后居中）
設置為 display:flex
設置 flex 值
設置其子元素的布局方式：垂直水平居中（沿主軸、側軸居中）
設定點擊圖片后文字移動的樣式
設定點擊圖片展開后的圖片的 flex 值
重要：不了解CSS和Flex的童鞋必看。
CSS參考手冊
CSS選擇器筆記
flex布局完全入門教程
JS源碼獲取所有類名為 panel 的元素
為其添加 click 事件監聽，編寫觸發事件調用的函數（給觸發的 DOM 元素添加/去掉樣式，實現拉伸/壓縮的效果）
為其添加 transitionend 事件監聽，編寫調用的函數（添加/去掉樣式，實現文字的飛入/飛出效果）
源碼下載Github Source Code
社群品牌：從零到壹全棧部落
定位：尋找共好，共同學習，持續輸出全棧技術社群
業界榮譽：IT界的邏輯思維
文化：輸出是最好的學習方式
官方公眾號：全棧部落
社群發起人：春哥(從零到壹創始人，交流微信：liyc1215)
技術交流社區：全棧部落BBS
全棧部落完整系列教程：全棧部落完整電子書學習筆記
| 關注全棧部落官方公眾號，每晚十點接收系列原創技術推送 |
|---|
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84203.html
摘要：然而學習布局，你只要學習幾個手機端頁面自適應解決方案布局進階版附源碼示例前端掘金一年前筆者寫了一篇手機端頁面自適應解決方案布局，意外受到很多朋友的關注和喜歡。 十分鐘學會 Fiddler - 后端 - 掘金一.Fiddler介紹 Fiddler是一個http抓包改包工具，fiddle英文中有欺騙、偽造之意，與wireshark相比它更輕量級，上手簡單，因為只能抓http和https數據...
摘要：完整中文版指南及視頻教程在從零到壹全棧部落。在此獲取到的信息為，以回調函數的形式返回，當獲取到位置信息之后，在動態的修改頁面中顯示的內容和指南針旋轉的角度。語法參數成功時候的回調函數，同時傳入一個對象當作參數。 本文出自：春哥個人博客：http://www.liyuechun.org作者：?黎躍春-追時間的人簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰。...
摘要：絕對底部前端掘金來自國外的設計達人，純，可以實現當正文內容很少時，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。 CSS 絕對底部 - 前端 - 掘金來自國外的設計達人，純CSS，可以實現: 當正文內容很少時，底部位于窗口最下面。當改變窗口高度時，不會出現重疊問題。甚至，創造該CSS的人還專門成立一個網站介紹這個CSS底部布局方案...
閱讀 2732·2021-11-22 13:54
閱讀 1068·2021-10-14 09:48
閱讀 2295·2021-09-08 09:35
閱讀 1558·2019-08-30 15:53
閱讀 1171·2019-08-30 13:14
閱讀 609·2019-08-30 13:09
閱讀 2526·2019-08-30 10:57
閱讀 3341·2019-08-29 13:18
