最少代码的瀑布流实现

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>最少代码的瀑布流实现</title> <style>html{_background:url(about:blank);} body{ background-color:#fff; color:#333; overflow-x: hidden;} body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend, button,input,textarea,th,td{margin:0;padding:0;} body,button,input,select,textarea{ font:12px/1.5 Microsoft YaHei,Tahoma,Helvetica,Arial,simsun} address,cite,dfn,em,var,i{font-style:normal;} ul,ol{list-style:none;} fieldset,img{border:0;} h1{font-size:18px;} h2{font-size:14px; font-weight:bold;} h3{font-size:14px; font-weight:400;} h4,h5{font-size:12px; font-weight:400;} input,textarea,button,select{font-size:12px; outline:none; resize:none; color:#333;} button{cursor: pointer;} table{border-collapse:collapse;border-spacing:0;} .clear {clear:both; height:0; font-size:0; line-height:0; overflow:hidden;} .cle:after, .clearfix:after, .clear_f:after, .cle_float:after{content:".";display:block;height:0;clear:both;visibility:hidden} .cle, .clearfix, .clear_f, .cle_float{zoom:1} .fl {float:left;} .fr {float:right;} a{text-decoration:none; color:#333; -webkit-transition: color .2s;-moz-transition: color .2s;-o-transition: color .2s; -ms-transition: color .2s;transition: color .2s;} a:hover{text-decoration:underline; color: #ff7d8e;} a:focus{outline:none;} ::selection {background:#ff7d8e; color:#fff;} #wrapper{width: 1008px; margin: 15px auto;} /*品牌列表*/ .brand-list{width: 1100px; overflow: hidden; margin-left: -10px;} .brand-list .brand-bd{position: relative; margin-left: 10px; margin-top: 5px;} .brand-list .item{position: absolute; width: 202px; background-color: #f8f8f8; border: 1px solid #f8f8f8; padding: 18px; top:0; left: 40%; -webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;-ms-transition: all 0.3s;transition: all 0.3s;} .brand-list .hover{box-shadow: 0px 1px 8px rgba(200,200,200,.6); background-color: #fff; border-color: #c8c8c8;} .brand-list .additem{padding: 0; width: 240px; border: none; } .brand-list .item h3{font-size: 42px; color: #666; font-family: arial; font-weight: bold; line-height: .8; margin-bottom: 20px;} .brand-list .item p{margin-bottom: 15px;}</style> </head> <body> <div id="wrapper">  <div class="brand-list"> <div class="brand-bd cle" id="brand-waterfall">  <div class="item" id="brand-a"> <h3>A</h3> <p><a href="#" target="_blank">ARDELL/艾黛尔</a></p> <p><a href="#" target="_blank">ANNASUI/安娜苏</a></p> <p><a href="#" target="_blank">ETUDEHOUSE/爱丽小屋</a></p> <p><a href="#" target="_blank">abeeco</a></p> <p><a href="#" target="_blank">AFU/阿芙</a></p> <p><a href="#" target="_blank">Egyptian-Magic-Cream/埃及魔法膏</a></p> <p><a href="#" target="_blank">adidas/阿迪达斯</a></p> </div> <div class="item" id="brand-b"> <h3>B</h3> <p><a href="#" target="_blank">HERBORIST/佰草集</a></p> <p><a href="#" target="_blank">BURBERRY/巴宝莉/博柏利</a></p> <p><a href="#" target="_blank">BIOTHERM/碧欧泉</a></p> <p><a href="#" target="_blank">benefit/贝玲妃</a></p> <p><a href="#" target="_blank">Bavii/柏羽</a></p> <p><a href="#" target="_blank">PaulSmith/保罗史密夫</a></p> <p><a href="#" target="_blank">Bobbi Brown/芭比布朗</a></p> <p><a href="#" target="_blank">BVLGARI/宝格丽</a></p> <p><a href="#" target="_blank">PURE&MILD/泊美</a></p> <p><a href="#" target="_blank">baviphat/芭比菲特</a></p> <p><a href="#" target="_blank">Peter Thomas Roth/彼得罗夫</a></p> <p><a href="#" target="_blank">BeDOOK/比度克</a></p> <p><a href="#" target="_blank">BIODERMA/贝德玛</a></p> <p><a href="#" target="_blank">BKBarry-MBlistex/碧唇</a></p> </div> <div class="item" id="brand-c"> <h3>C</h3> <p><a href="#" target="_blank">Fenix/长生鸟</a></p> <p><a href="#" target="_blank">For Beloved One/宠爱之名</a></p> <p><a href="#" target="_blank">CHARMZONE/婵真</a></p> </div> <div class="item" id="brand-d"> <h3>D</h3> <p><a href="#" target="_blank">Dr.Jart+Dr.MJDior/迪奥</a></p> <p><a href="#" target="_blank">dodo</a></p> <p><a href="#" target="_blank">Dior/迪奥</a></p> <p><a href="#" target="_blank">Dove/多芬</a></p> <p><a href="#" target="_blank">DHC/蝶翠诗</a></p> <p><a href="#" target="_blank">Davidoff/大卫杜夫</a></p> </div> <div class="item" id="brand-e"> <h3>E</h3> <p><a href="#" target="_blank">N-Dorphin/恩朵娉</a></p> <p><a href="#" target="_blank">OPERA/娥佩兰</a></p> <p><a href="#" target="_blank">ELF</a></p> <p><a href="#" target="_blank">eos</a></p> </div> <div class="item" id="brand-f"> <h3>F</h3> <p><a href="#" target="_blank">芳草集</a></p> <p><a href="#" target="_blank">THEFACESHOP/菲诗小铺</a></p> <p><a href="#" target="_blank">Fanxishop/凡茜</a></p> <p><a href="#" target="_blank">FANCL/芳珂（芳凯尔）</a></p> <p><a href="#" target="_blank">VERSACE/范思哲</a></p> </div> <div class="item" id="brand-g"> <h3>G</h3> <p><a href="#" target="_blank">ARDELL/艾黛尔</a></p> <p><a href="#" target="_blank">ANNASUI/安娜苏</a></p> <p><a href="#" target="_blank">ETUDEHOUSE/爱丽小屋</a></p> <p><a href="#" target="_blank">abeeco</a></p> <p><a href="#" target="_blank">AFU/阿芙</a></p> <p><a href="#" target="_blank">Egyptian-Magic-Cream/埃及魔法膏</a></p> <p><a href="#" target="_blank">adidas/阿迪达斯</a></p> </div> <div class="item" id="brand-h"> <h3>H</h3> <p><a href="#" target="_blank">LAMER/海蓝之谜</a></p> <p><a href="#" target="_blank">BOCOTON/海诺丝丽</a></p> <p><a href="#" target="_blank">CO.E/韩伊</a></p> <p><a href="#" target="_blank">Herbacin/贺本清</a></p> <p><a href="#" target="_blank">花瑶花</a></p> <p><a href="#" target="_blank">花漾美姬</a></p> <p><a href="#" target="_blank">HEY NATURE/韩彩妮</a></p> <p><a href="#" target="_blank">Hipitch/黑龙堂</a></p> </div> <div class="item" id="brand-l"> <h3>L</h3> <p><a href="#" target="_blank">LAMER/海蓝之谜</a></p> <p><a href="#" target="_blank">BOCOTON/海诺丝丽</a></p> <p><a href="#" target="_blank">CO.E/韩伊</a></p> <p><a href="#" target="_blank">CO.E/韩伊</a></p> <p><a href="#" target="_blank">CO.E/韩伊</a></p> <p><a href="#" target="_blank">Herbacin/贺本清</a></p> <p><a href="#" target="_blank">花瑶花</a></p> <p><a href="#" target="_blank">花漾美姬</a></p> <p><a href="#" target="_blank">HEY NATURE/韩彩妮</a></p> <p><a href="#" target="_blank">Hipitch/黑龙堂</a></p> </div> <div class="item" id="brand-m"> <h3>M</h3> <p><a href="#" target="_blank">LAMER/海蓝之谜</a></p> <p><a href="#" target="_blank">BOCOTON/海诺丝丽</a></p> <p><a href="#" target="_blank">CO.E/韩伊</a></p> <p><a href="#" target="_blank">Herbacin/贺本清</a></p> <p><a href="#" target="_blank">花瑶花</a></p> <p><a href="#" target="_blank">花漾美姬</a></p> <p><a href="#" target="_blank">HEY NATURE/韩彩妮</a></p> <p><a href="#" target="_blank">Hipitch/黑龙堂</a></p> </div> <div class="item" id="brand-n"> <h3>N</h3> <p><a href="#" target="_blank">LAMER/海蓝之谜</a></p> <p><a href="#" target="_blank">LAMER/海蓝之谜</a></p> <p><a href="#" target="_blank">LAMER/海蓝之谜</a></p> <p><a href="#" target="_blank">BOCOTON/海诺丝丽</a></p> <p><a href="#" target="_blank">CO.E/韩伊</a></p> <p><a href="#" target="_blank">Herbacin/贺本清</a></p> <p><a href="#" target="_blank">花瑶花</a></p> <p><a href="#" target="_blank">花漾美姬</a></p> <p><a href="#" target="_blank">HEY NATURE/韩彩妮</a></p> <p><a href="#" target="_blank">Hipitch/黑龙堂</a></p> </div> </div> </div>  </div> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script> $(function(){ $('#brand-waterfall').waterfall(); }); // 瀑布流插件 // pannysp 2013.4.9 ;(function ($) { $.fn.waterfall = function(options) { var df = { item: '.item', margin: 15, addfooter: true }; options = $.extend(df, options); return this.each(function() { var $box = $(this), pos = [], _box_width = $box.width(), $items = $box.find(options.item), _owidth = $items.eq(0).outerWidth() + options.margin, _oheight = $items.eq(0).outerHeight() + options.margin, _num = Math.floor(_box_width/_owidth); (function() { var i = 0; for (; i < _num; i++) { pos.push([i*_owidth,0]); } })(); $items.each(function() { var _this = $(this), _temp = 0, _height = _this.outerHeight() + options.margin; _this.hover(function() { _this.addClass('hover'); },function() { _this.removeClass('hover'); }); for (var j = 0; j < _num; j++) { if(pos[j][1] < pos[_temp][1]){ //暂存top值最小那列的index _temp = j; } } this.style.cssText = 'left:'+pos[_temp][0]+'px; top:'+pos[_temp][1]+'px;'; //插入后，更新下该列的top值 pos[_temp][1] = pos[_temp][1] + _height; }); // 计算top值最大的赋给外围div (function() { var i = 0, tops = []; for (; i < _num; i++) { tops.push(pos[i][1]); } tops.sort(function(a,b) { return a-b; }); $box.height(tops[_num-1]); //增加尾部填充div if(options.addfooter){ addfooter(tops[_num-1]); } })(); function addfooter(max) { var addfooter = document.createElement('div'); addfooter.className = 'item additem'; for (var i = 0; i < _num; i++) { if(max != pos[i][1]){ var clone = addfooter.cloneNode(), _height = max - pos[i][1] - options.margin; clone.style.cssText = 'left:'+pos[i][0]+'px; top:'+pos[i][1]+'px; height:'+_height+'px;'; $box[0].appendChild(clone); } } } }); } })(jQuery);</script> </body> </html>

提示：你可以先修改部分代码再运行。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Responsive CSS Grid Masonry Gallery</title> <style> body { background-color: #eee; } .hello { opacity: 1 !important; } .full { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; } .full .content { background-color: rgba(0, 0, 0, 0.75) !important; height: 100%; width: 100%; display: grid; } .full .content img { left: 50%; transform: translate3d(0, 0, 0); animation: zoomin 1s ease; max-width: 100%; max-height: 100%; margin: auto; } .byebye { opacity: 0; } .byebye:hover { transform: scale(0.2) !important; } .gallery { display: grid; grid-column-gap: 8px; grid-row-gap: 8px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-auto-rows: 8px; } .gallery img { max-width: 100%; border-radius: 8px; box-shadow: 0 0 16px #333; transition: all 1.5s ease; } .gallery img:hover { box-shadow: 0 0 32px #333; } .gallery .content { padding: 4px; } .gallery .gallery-item { transition: grid-row-start 300ms linear; transition: transform 300ms ease; transition: all 0.5s ease; cursor: pointer; } .gallery .gallery-item:hover { transform: scale(1.025); } @media (max-width: 600px) { .gallery { grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); } } @media (max-width: 400px) { .gallery { grid-template-columns: repeat(auto-fill, minmax(50%, 1fr)); } } @-moz-keyframes zoomin { 0% { max-width: 50%; transform: rotate(-30deg); filter: blur(4px); } 30% { filter: blur(4px); transform: rotate(-80deg); } 70% { max-width: 50%; transform: rotate(45deg); } 100% { max-width: 100%; transform: rotate(0deg); } } @-webkit-keyframes zoomin { 0% { max-width: 50%; transform: rotate(-30deg); filter: blur(4px); } 30% { filter: blur(4px); transform: rotate(-80deg); } 70% { max-width: 50%; transform: rotate(45deg); } 100% { max-width: 100%; transform: rotate(0deg); } } @-o-keyframes zoomin { 0% { max-width: 50%; transform: rotate(-30deg); filter: blur(4px); } 30% { filter: blur(4px); transform: rotate(-80deg); } 70% { max-width: 50%; transform: rotate(45deg); } 100% { max-width: 100%; transform: rotate(0deg); } } @keyframes zoomin { 0% { max-width: 50%; transform: rotate(-30deg); filter: blur(4px); } 30% { filter: blur(4px); transform: rotate(-80deg); } 70% { max-width: 50%; transform: rotate(45deg); } 100% { max-width: 100%; transform: rotate(0deg); } } </style> </head> <body> <h1>Masonry Gallery</h1> <div class="gallery" id="gallery"> <div class="gallery-item"> <div class="content"><img src="https://source.unsplash.com/random/?tech,care" alt=""></div> </div> <div class="gallery-item"> <div class="content"><img src="https://source.unsplash.com/random/?tech,studied" alt=""></div> </div> <div class="gallery-item"> <div class="content"><img src="https://source.unsplash.com/random/?tech,substance" alt=""></div> </div> <div class="gallery-item"> <div class="content"><img src="https://source.unsplash.com/random/?tech,choose" alt=""></div> </div> <div class="gallery-item"> <div class="content"><img src="https://source.unsplash.com/random/?tech,past" alt=""></div> </div> <div class="gallery-item"> <div class="content"><img src="https://source.unsplash.com/random/?tech,lamp" alt=""></div> </div> <div class="gallery-item"> <div class="content"><img src="https://source.unsplash.com/random/?tech,yet" alt=""></div> </div> <div class="gallery-item"> <div class="content"><img src="https://source.unsplash.com/random/?tech,eight" alt=""></div> </div> <div class="gallery-item"> <div class="content"><img src="https://source.unsplash.com/random/?tech,crew" alt=""></div> </div> <div class="gallery-item"> <div class="content"><img src="https://source.unsplash.com/random/?tech,event" alt=""></div> </div> <div class="gallery-item"> <div class="content"><img src="https://source.unsplash.com/random/?tech,instrument" alt=""></div> </div> <div class="gallery-item"> <div class="content"><img src="https://source.unsplash.com/random/?tech,practical" alt=""></div> </div> <div class="gallery-item"> <div class="content"><img src="https://source.unsplash.com/random/?tech,pass" alt=""></div> </div> <div class="gallery-item"> <div class="content"><img src="https://source.unsplash.com/random/?tech,bigger" alt=""></div> </div> <div class="gallery-item"> <div class="content"><img src="https://source.unsplash.com/random/?tech,number" alt=""></div> </div> <div class="gallery-item"> <div class="content"><img src="https://source.unsplash.com/random/?tech,feature" alt=""></div> </div> <div class="gallery-item"> <div class="content"><img src="https://source.unsplash.com/random/?tech,line" alt=""></div> </div> <div class="gallery-item"> <div class="content"><img src="https://source.unsplash.com/random/?tech,railroad" alt=""></div> </div> <div class="gallery-item"> <div class="content"><img src="https://source.unsplash.com/random/?tech,pride" alt=""></div> </div> <div class="gallery-item"> <div class="content"><img src="https://source.unsplash.com/random/?tech,too" alt=""></div> </div> <div class="gallery-item"> <div class="content"><img src="https://source.unsplash.com/random/?tech,bottle" alt=""></div> </div> <div class="gallery-item"> <div class="content"><img src="https://source.unsplash.com/random/?tech,base" alt=""></div> </div> <div class="gallery-item"> <div class="content"><img src="https://source.unsplash.com/random/?tech,cell" alt=""></div> </div> <div class="gallery-item"> <div class="content"><img src="https://source.unsplash.com/random/?tech,bag" alt=""></div> </div> <div class="gallery-item"> <div class="content"><img src="https://source.unsplash.com/random/?tech,card" alt=""></div> </div> </div> </body> <script> var gallery = document.querySelector('#gallery'); var getVal = function (elem, style) { return parseInt(window.getComputedStyle(elem).getPropertyValue(style)); }; var getHeight = function (item) { return item.querySelector('.content').getBoundingClientRect().height; }; var resizeAll = function () { var altura = getVal(gallery, 'grid-auto-rows'); var gap = getVal(gallery, 'grid-row-gap'); gallery.querySelectorAll('.gallery-item').forEach(function (item) { var el = item; el.style.gridRowEnd = "span " + Math.ceil((getHeight(item) + gap) / (altura + gap)); }); }; gallery.querySelectorAll('img').forEach(function (item) { item.classList.add('byebye'); if (item.complete) { console.log(item.src); } else { item.addEventListener('load', function () { var altura = getVal(gallery, 'grid-auto-rows'); var gap = getVal(gallery, 'grid-row-gap'); var gitem = item.parentElement.parentElement; gitem.style.gridRowEnd = "span " + Math.ceil((getHeight(gitem) + gap) / (altura + gap)); item.classList.remove('byebye'); }); } }); window.addEventListener('resize', resizeAll); gallery.querySelectorAll('.gallery-item').forEach(function (item) { item.addEventListener('click', function () { item.classList.toggle('full'); }); }); </script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 最少代码的瀑布流实现