鏈潃瀹炵敤鐨勭簿绁烇紝浠婂ぉ鍒嗕韩涓嬬€戝竷娴佸竷灞€锛堟槰澶╂湁涓皬鍝ラ棶鎴戞€庝箞鍋氾紝鎵句簡涓篃娌℃壘鍒板ソ涔呬簡鍟婏紝鍘熸潵鏄湪鍐呯綉鍐欑殑锛夈€傛紨绀哄湴鍧€锛歨ttp://www.lilnong.top/static/html/waterfall.html浠€涔堟槸鐎戝竷娴佸竷灞€锛熸瘮濡傝姳鐡ｇ綉鍜岃槕鑿囪锛堟垜璐翠簡涓嬪浘锛夛紝杩欎簺缃戠珯鍦ㄥ睍绀哄唴瀹圭殑鏃跺€欓兘閲囩敤浜嗙€戝竷娴佸竷灞€銆傛垜浠繕鎯冲埗浣滀竴涓〉闈㈡潵灞曠ず鎴戜滑鐨勮璁＄锛堝浐瀹氬搴︼紝鍙彉楂樺害锛夛紝鐎戝竷娴佹槸涓€涓緢濂界殑瑙ｅ喅鏂规銆傜€戝竷娴佸竷灞€鐨勬牳蹇冩槸鍩轰簬缃戞牸鐨勫竷灞€锛屾瘡琛屽寘鍚殑椤圭洰鍒楄〃鐨勯珮搴︽槸闅忔満鐨勶紙楂樺害闅忓叾鑷韩鍐呭鍔ㄦ€佸彉鍖栵級锛屾瘡涓」鐩垪琛ㄤ互鍫嗘爤鏂瑰紡鎺掑垪銆傛渶閲嶈鐨勬槸锛屽爢鏍堜箣闂存病鏈夎繃澶氱殑闂磋窛宸紓銆傝繕鏄湅涓婂浘锛岀湅鐪嬫垜浠鐨勭€戝竷娴佸竷灞€鏄粈涔堟牱瀛愮殑銆傝槕鑿囪鑺辩摚缃戜含涓淰V鎴浘鏂规鍒嗕负娓犻亾缁濆缃戞牸銆佸唴鑱斻€佹诞鍔ㄩ瓟鏈柟妗堜篃鍙互鐪嬫垚鏄函CSS鏂规锛屾湰璐ㄤ笂鏄緷璧栨枃妗ｆ祦锛屼粠宸﹀埌鍙筹紝浠庝笂鍒颁笅銆傛柟妗坓ridinlinefloatbootstrap-grid鐨勬埅鍥惧彲浠ョ湅鍑烘枃妗ｆ祦甯冨眬涓湁涓€涓潪甯告槑鏄剧殑绾挎蹇点€傚綋涓€鏉＄嚎琚媺浼告椂锛屽畠浼氱暀涓嬩竴涓┖鐧斤紝绾夸笉浼氶噸鍙犮€傝繖閲屾渶绁炲鐨勬槸娴姩甯冨眬銆侱OM缁撴瀯div.list//璁剧疆grid鎴朾lock锛屾敞鎰忔竻闄ゆ诞鍔╠iv.item//璁剧疆涓篿nline鎴杅loat锛屼娇鍏跺彲浠ユ祦鍔╥mg//璁剧疆鍥哄畾瀹藉害锛岃嚜閫傚簲楂樺害锛岄棿璺濈瓑gridschemedescription.wrap-waterfall--gridimg{vertical-align:top;width:100px}.wrap-waterfall--grid.list{display:grid;缃戞牸闂撮殭锛?0px锛?*鍙互鐪嬪埌缃戞牸鐨勫ぇ灏忓拰浣嶇疆闇€瑕佹彁鍓嶈缃ソ*/grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(50px,auto);}grid鍦ㄦ煇浜涙儏鍐典笅浼樹簬flex銆傛瘮濡備綘瑕佺獊鐮磋鏁伴檺鍒讹紝浣嗘槸鍙€傜敤浜庡浐瀹氬竷灞€锛屾瘮濡備笅鍥剧殑甯冨眬锛屼笉浣跨敤grid鎬庝箞瀹炵幇鍛紵缃戜笂鏈変竴涓敤缃戞牸瀹炵幇鐎戝竷娴佸竷灞€鐨勬柟妗堬紝浣嗘槸鎴戠湅鍒版湁鍑犱釜涓嶆槸鑹插潡锛岃€屾槸鍥剧墖鍙樺舰瑁佸壀浜嗐€傛柟妗堟槸鐢╪th-child璁剧疆楂樺害锛屽お鍚撲汉浜嗐€俢olumns鍜宖lexCSS瀹炵幇鐨勪笉鍙潬鏂规涔熸槸绾疌SS鏂规銆備笌涓婅堪鏂规鐩告瘮锛屾柟妗堝彲浠ユ帴鍙楋紝浣嗕粛瀛樺湪涓€浜涢棶棰樸€傞『搴忔槸鍏堝瀭鐩达紝鐒跺悗姘村钩锛堝垪锛夈€傚吋瀹规€ч棶棰橈紙flex锛夐渶瑕佺粰瀹氫竴涓浐瀹氱殑楂樺害锛屼細瓒呭嚭setcolumn锛屾棤娉曞～婊etcolumn銆係chemecolumnsflexscreenshot鏈韩灏辨敮鎸乧olumnsscheme锛屽彧闇€瑕佷负鐖跺垪璁剧疆锛?锛涘垪闂磋窛锛?px锛?寮规€ф柟妗坒lex-flow:columnwrap;楂樺害锛?300px锛涢粯璁ゆ儏鍐典笅锛屽畠鏄按骞虫帓鍒楃殑銆傞€氳繃灏嗗叾淇敼涓哄瀭鐩存帓鍒楀苟鍏佽鎹㈣锛屽唴瀹瑰皢琚浐瀹氶珮搴﹀寘瑁广€侫bsolute锛岄€氶亾楂樺害璁＄畻鏂规ReliableschemeAbsolute鍙栧墿浣欓€氶亾璁＄畻楂樺害瀛愰€氶亾澶撮儴鎴浘杩欓噷鐨勬柟妗堟槸鍙潬鐨勶紝鍙互婊¤冻鎴戜滑鐨勮姹傘€傚洖鎯充竴涓嬫垜浠殑闇€姹傦細鏄剧ず涓€浜涘唴瀹癸紝鍐呭鍏锋湁鍥哄畾瀹藉害锛屽彲鍙橀珮搴︾殑鐗规€с€傚彲鍙橀珮搴︿竴鑸槸鐢变簬鍐呭闀垮害鎴栭珮搴︿笉涓€鑷撮€犳垚鐨勩€傚父瑙佺殑鍐呭鍒嗕负鏂囧瓧鍜屽浘鐗囦袱绉嶃€傚浜庢枃鏈紝鍦ㄦ病鏈夊紓姝ュ瓧浣撶殑鎯呭喌涓嬶紝鍙互鐞嗚В涓哄悓姝ヨ幏鍙栨鐨勯珮搴﹀嵆鍙€傚浜庡浘鐗囷紝鍥犱负鍔犺浇鏄紓姝ョ殑锛屾墍浠ヨ幏鍙栫洅瀛愮殑鐪熷疄楂樺害涔熸槸寮傛鐨勩€備絾鏄繖閲屼竴鑸垎涓轰袱绉嶆病鏈夐珮搴︾殑鎯呭喌锛岃繖鏃跺彲浠ヤ娇鐢╫nload鏉ョ洃鍚浘鐗囧姞杞藉畬鎴愩€傜瓑鍒板浘鍍忓姞杞藉畬姣曞啀鑾峰彇楂樺害銆傛湁涓€涓珮搴︺€傛瑙ｅ喅鏂规閫氬父鐢ㄤ簬灏侀潰鍥惧儚鎴栨枃绔犮€備笂浼犲浘鐗囨椂锛屽皢淇濆瓨鍘熷鍥剧墖澶у皬銆傝繖鏃跺€欐垜浠彲浠ョ洿鎺ヤ娇鐢ㄥ凡鏈夌殑鏁版嵁銆傝幏鍙栧浘鐗囬珮搴?/鐢ㄤ簬鑾峰彇鍥剧墖鐪熷疄楂樺害naturalHeight:1180//鐢ㄤ簬鑾峰彇鍥剧墖鐪熷疄瀹藉害naturalWidth:1200//鐢ㄦ埛鑾峰彇鍥剧墖褰撳墠娓叉煋楂樺害锛堜細鍙梒ss褰卞搷锛塰eight:98//鐢ㄦ埛鑾峰彇鍥剧墖褰撳墠娓叉煋瀹藉害(鍙梒ss褰卞搷)width:100//杩斿洖娴忚鍣ㄦ槸鍚﹀姞杞藉畬鍥剧墖銆傚鏋滃姞杞藉畬鎴愬垯杩斿洖true锛屽惁鍒欒繑鍥瀎asle銆俢omplete灞炴€?/鍙互鐩戝惉鍥剧墖鍔犺浇瀹屾垚鐨刟ctiononload鏄牴鎹笂闈㈢殑鍐呭锛岄偅涔堟垜浠彲浠ュ厛鍒ゆ柇complete灞炴€э紝functiongetImageSize(img){if(img.complete){returnPromise.resolve({naturalHeight:img.naturalHeight,naturalWidth:img.naturalWidth,height:img.height,width:img.width,})}else{returnnewPromise((resolve,reject)=>{img.addEventListener('load',()=>{resolve({naturalHeight:img.naturalHeight,naturalWidth:img.naturalWidth,height:img.height,width:img.width,})})})}}/*//娴嬭瘯鐢ㄤ緥el=document.createElement('img');el.src='http://cors-www.lilnong.top/favicon.ico?'+Math.random()getImageSize(el).then(console.log).catch(console.error)setTimeout(()=>getImageSize(el).then(console.log).catch(console.error),1000)*/缁濆璁＄畻楂樺害鏂规鍥犱负鏅€氱殑甯冨眬宸茬粡涓嶈兘婊¤冻鎴戜滑鐨勯渶姹傦紝鍙互鑰冭檻浣跨敤鏂畾ion:absolute浣垮唴瀹归€氳繃缁濆瀹氫綅鏄剧ず銆傛牳蹇冩搷浣滄槸缁存姢姣忎釜鍏冪礌鐨刲eft鍜宼op锛岀劧鍚庡埄鐢╨eft鍜宼op娓叉煋鍒版纭殑浣嶇疆銆俫etListPosition(){//瑙嗗彛瀹藉害/姣忓垪鐨勫搴﹁鍒嗘垚鑻ュ共鍒條etcol=this.screenWidth/this.itemWidth>>0;鍙橀噺arr=[];for(vari=0;i
