程序員用100行代碼記錄度蜜月，誰說程序員不懂浪漫？

對於哎旅行的旅客們來說，明信片是用來記錄自己所去過的那些城市，是一張張充滿回憶的小卡片。

那麼對於過多的明信片是如何解決的呢？

貼美美的一牆，或許是很多人的選擇，因為這樣看上去也是一種美。

是不是一種美

案例：

那麼對於程序員來說呢？或許這樣更方便，更簡潔，也解決了不容易把明信片弄丟的問題。

圖樣式

【GIF】點我查看

思路：

其實想要做這麼一個也是很簡單的，

知識點：HTML/CSS布局，兼容性處理

原生javascript DOM操作，滑鼠拖拽功能，

碰撞檢測，勾股定理計算最小距離，原生javascript運動框架封裝，

面向過程函數式封裝思維。

PS：這個特效對於布局的要求並不高，大部分學習web前端的朋友都可以做出來，但是對

於javascript的要求不低，特別是對於邏輯思維，以及一些兼容性的處理，還有js的碰撞檢測，

演算法，在這個案例里我們用的都是原生 javascript代碼，原生JS一定是我們面試中必須要學的

東西，而不是能用jquery湊數的。

源碼：

當然，在這裡不得不得強勢來一波GG了，獲取此案例的小夥伴們，可以直接來前端群：621071874，歡迎小白進來一起學習，共同進步，當然我也會找一些比較經典的案例，符合現在企業的面試需求以及適合小白學習的基礎視屏以及學習素材都會相應的在群里共享。（包括此案例，僅限於小白哦，大牛我想這個對你已經很簡單了吧）

CSS

如果是你，你會選擇用哪種方式記 (單選)0人0%貼滿滿的一牆0人0%盒子記錄投票