原生js實現(xiàn)瀑布流布局

首先是布局

<div id = "main">

? ? ? ? ? ? ? ? <div class = "box">

? ? ? ? ? ? ? ? ? ? <div class = "pic">

? ? ? ? ? ? ? ? ? ? ? ? <img src = "" alt="">

? ? ? ? ? ? ? ? ? ? ? ? <div class="box1"></div>

? ? ? ? ? ? ? ? ? ? ? ? <div class="box3"></div>

? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? </div>

? ? ? ? </div>

然后要完成瀑布流布局,必須要用定位


接著就是js了,先請求ajax 數(shù)據(jù)


接著就是瀑布流了



到這一步就算是完成了,看一下效果


覺得還可以的就點了關(guān)注吧

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 14,120評論 1 92
  • 27、移動端響應(yīng)式布局開發(fā) 響應(yīng)式布局開發(fā) 1、什么是響應(yīng)式布局開發(fā)?把我們開發(fā)完成的產(chǎn)品,能夠讓其適配不同的設(shè)備...
    萌妹撒閱讀 1,197評論 0 0
  • 一、簡歷準(zhǔn)備 1、個人技能 (1)自定義控件、UI設(shè)計、常用動畫特效 自定義控件 ①為什么要自定義控件? Andr...
    lucas777閱讀 5,379評論 2 54
  • 瀑布流布局中的圖片有一個核心特點 —— 等寬不定等高,瀑布流布局在國內(nèi)網(wǎng)網(wǎng)站都有一定規(guī)模的使用,比如pintere...
    牧云云閱讀 1,514評論 1 3
  • 背景 :夏天房內(nèi)開著空調(diào),冰冰進(jìn)房間后沒有帶上門 媽媽:寶寶快去關(guān)門,不然一會兒空調(diào)跑了 冰冰:空調(diào)夾著,不會跑
    330912閱讀 94評論 0 0

友情鏈接更多精彩內(nèi)容