Html
    Css
    Js


img {
	border:none;
	display:block
}
.container {
	width:1000px;
	margin:0 auto;
	position:relative;
}
.container .item {
	position:absolute;
	box-sizing:border-box;
}
.item img {
	width:240px;
	padding:3px;
	border:1px solid #eee;
	box-sizing:border-box;
	box-shadow:0 0 5px;
	border-radius:5px;
}
@media screen and (max-width:1200px) {
	.container {
	width:800px !important;
	margin:0 auto;
	position:relative;
}
}@media only screen and(min-width:1200px) and (max-width:1920px) {
	.container {
	width:1000px !important;
	margin:0 auto;
	position:relative;
}
}

↑上面代碼改變,會自動顯示代碼結果 jQuery調用版本:1.11.3
 立即下載

js原生瀑布流

注意:在上邊的圖片沒法弄,大家可以下下來,寫自己的數組數據圖片如:[{src:'path'}];還有就是顯示的不是等高的,這是因為沒有圖片;

★★★實現了自適應  在屏幕為1200-1920的時候,container為1000此時顯示,此時會計算出顯示4列

當屏幕為1200一下的時候,container為800,此時會計算顯示出三列

調用方法:

var wf = new waterfall({
     containerw: cw,//最外邊容器的寬度如:1000
     childw: itemw,//字容器的寬度如:240
     childlist: items,//傳入子容器的數組(就是先默認顯示幾個子容器)
     imglist: imglist//傳入圖片數據[{src:'path'}]
 })
wf.init()
0
  短信接口
河北时时彩投注站