From a3a8c23b196980732a795713a5eb5fe0c7075bf9 Mon Sep 17 00:00:00 2001 From: fengxiang <110431245@qq.com> Date: Wed, 11 Jul 2018 21:47:13 +0800 Subject: [PATCH] Revert "提交" --- src/app/routes/style/gridmasonry/gridmasonry.component.html | 247 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 247 insertions(+), 0 deletions(-) diff --git a/src/app/routes/style/gridmasonry/gridmasonry.component.html b/src/app/routes/style/gridmasonry/gridmasonry.component.html new file mode 100644 index 0000000..99cfe46 --- /dev/null +++ b/src/app/routes/style/gridmasonry/gridmasonry.component.html @@ -0,0 +1,247 @@ +<div class="content__title"> + <h1> + Grid Masonry + <small>Pure CSS and mobile first with a fallback to inline grid, Supported from IE10, + <a href="//caniuse.com/#feat=multicolumn" + target="_blank">browser compatibility</a> + </small> + </h1> +</div> +<div class="row-masonry row-masonry-xl-8 row-masonry-lg-5 row-masonry-md-4 row-masonry-sm-3 row-masonry-xs-2"> + <div class="col-masonry"> + <div class="box-placeholder"> + <h2 class="text-grey text-md mb-sm">Masonry Item</h2> + <p>Ipsum do ullamco laboris excepteur. Do incididunt commodo adipisicing officia sunt tempor. Deserunt exercitation proident + enim veniam laboris fugiat ipsum veniam dolore duis sit duis. In deserunt ut nulla ad eu.</p> + </div> + </div> + <div class="col-masonry"> + <div class="box-placeholder"> + <h2 class="text-grey text-md mb-sm">Masonry Item</h2> + <p>Veniam non sunt quis ex consequat ea esse duis esse. Ut incididunt eiusmod occaecat esse aute adipisicing culpa. Voluptate + ullamco labore laboris et do in.</p> + </div> + </div> + <div class="col-masonry"> + <div class="box-placeholder"> + <h2 class="text-grey text-md mb-sm">Masonry Item</h2> + <p>Esse elit et aute do aliqua ipsum cillum consectetur deserunt deserunt cupidatat aute aliqua aute. Aliquip ad incididunt + dolor cupidatat quis officia cillum sit ex. Irure ut sit Lorem sunt nulla excepteur ipsum ipsum dolore cillum cupidatat + ipsum. Do amet aliquip sunt consectetur nulla. Cupidatat ad consectetur veniam aliqua non ullamco laboris eiusmod. + In voluptate officia aliquip dolore sit qui consectetur fugiat aliqua duis occaecat. Non mollit elit nisi ea mollit + anim excepteur ut qui exercitation.</p> + </div> + </div> + <div class="col-masonry"> + <div class="box-placeholder"> + <h2 class="text-grey text-md mb-sm">Masonry Item</h2> + <p>Ullamco incididunt do deserunt cillum veniam cillum amet ad. Deserunt laborum cupidatat mollit proident adipisicing + in culpa consequat adipisicing et non. Aliqua ea elit voluptate esse aliqua dolor ipsum. Ut officia officia fugiat + sint esse qui incididunt Lorem occaecat.</p> + </div> + </div> + <div class="col-masonry"> + <div class="box-placeholder"> + <h2 class="text-grey text-md mb-sm">Masonry Item</h2> + <p>Ea non irure qui fugiat aliquip esse adipisicing. Cillum aliquip dolor non fugiat ad aliqua. In voluptate et non irure + elit. Tempor qui sunt incididunt amet tempor sint et voluptate sunt qui sit culpa proident ipsum. Sunt duis pariatur + officia ut magna pariatur fugiat dolor cillum laboris eu. Qui incididunt minim nostrud exercitation aliquip.</p> + </div> + </div> + <div class="col-masonry"> + <div class="box-placeholder"> + <h2 class="text-grey text-md mb-sm">Masonry Item</h2> + <p>Fugiat commodo ad consectetur reprehenderit. Officia fugiat ea proident exercitation occaecat mollit laboris fugiat + consequat deserunt anim ipsum magna ex. Esse do amet cillum aute ut ea.</p> + </div> + </div> + <div class="col-masonry"> + <div class="box-placeholder"> + <h2 class="text-grey text-md mb-sm">Masonry Item</h2> + <p>Magna id fugiat laborum elit ullamco deserunt do laboris non qui. Duis et exercitation nulla labore cupidatat nostrud + pariatur reprehenderit in nostrud. Consequat consequat consectetur mollit adipisicing. Laborum amet sit sint aliquip + fugiat adipisicing enim reprehenderit. Voluptate nisi reprehenderit voluptate sit enim aute deserunt cupidatat et + dolore labore voluptate id dolore.</p> + </div> + </div> + <div class="col-masonry"> + <div class="box-placeholder"> + <h2 class="text-grey text-md mb-sm">Masonry Item</h2> + <p>Reprehenderit non ullamco quis non excepteur irure excepteur anim ullamco labore. Sit occaecat consectetur laborum + consequat elit sint sit sunt. Duis aliquip magna ipsum consequat eiusmod officia.</p> + </div> + </div> + <div class="col-masonry"> + <div class="box-placeholder"> + <h2 class="text-grey text-md mb-sm">Masonry Item</h2> + <p>Magna nostrud ex cupidatat id in non labore ad voluptate est irure tempor. Nostrud aliqua magna laborum incididunt + deserunt veniam nulla nulla labore cillum. Id laboris Lorem dolore minim reprehenderit eu proident aliqua magna id + aute aute. Aliqua est et nulla eu duis id laborum magna.</p> + </div> + </div> + <div class="col-masonry"> + <div class="box-placeholder"> + <h2 class="text-grey text-md mb-sm">Masonry Item</h2> + <p>Sint pariatur eiusmod id sit est exercitation laboris mollit pariatur minim. Ex aliquip commodo nulla reprehenderit + et laboris consequat pariatur culpa culpa proident ullamco laboris. Ex aliquip deserunt labore aliquip ea est sit + quis amet tempor sunt amet. Id reprehenderit do elit sit consectetur. Aute amet sint tempor ipsum sint laboris est + do culpa tempor. Pariatur fugiat aute officia et laboris voluptate sit nisi in anim excepteur amet eu.</p> + </div> + </div> + <div class="col-masonry"> + <div class="box-placeholder"> + <h2 class="text-grey text-md mb-sm">Masonry Item</h2> + <p>Incididunt ut eu fugiat do deserunt voluptate id et est aliqua eu sint. Ad dolore excepteur ipsum nulla proident dolore + aute sunt. Aute enim do dolor laborum id eiusmod sit.</p> + </div> + </div> + <div class="col-masonry"> + <div class="box-placeholder"> + <h2 class="text-grey text-md mb-sm">Masonry Item</h2> + <p>Amet elit et ad amet nulla minim deserunt mollit adipisicing. Laboris non ipsum ad laborum non magna velit tempor cillum + cillum. Proident dolore eiusmod ex elit cillum. Cupidatat duis pariatur ut id deserunt laboris. Culpa excepteur est + deserunt eiusmod do do ut est labore eiusmod. Eu eu veniam excepteur mollit anim est velit nisi. Velit quis tempor + laboris culpa.</p> + </div> + </div> + <div class="col-masonry"> + <div class="box-placeholder"> + <h2 class="text-grey text-md mb-sm">Masonry Item</h2> + <p>Nostrud nulla nisi laboris officia anim nostrud nulla cupidatat veniam ea duis. Pariatur ea ullamco irure laborum. + Consectetur labore in occaecat ullamco est fugiat nisi sunt deserunt. Non sunt dolor elit culpa dolore adipisicing. + Fugiat mollit ex voluptate nulla deserunt dolore ea sunt commodo et qui laborum.</p> + </div> + </div> + <div class="col-masonry"> + <div class="box-placeholder"> + <h2 class="text-grey text-md mb-sm">Masonry Item</h2> + <p>Quis pariatur ea nisi excepteur mollit nulla reprehenderit labore. Exercitation pariatur eu pariatur tempor deserunt + ad occaecat ad in pariatur id et dolore. Enim veniam aute magna fugiat eiusmod velit quis. Laborum sit consequat + dolore qui minim culpa aliqua pariatur cillum velit. Nostrud enim aliqua ut nisi consectetur pariatur fugiat do esse + fugiat enim et tempor ad. Eiusmod ut incididunt proident labore sint sit culpa excepteur id. Fugiat mollit qui eu + eu fugiat proident.</p> + </div> + </div> + <div class="col-masonry"> + <div class="box-placeholder"> + <h2 class="text-grey text-md mb-sm">Masonry Item</h2> + <p>Tempor do officia magna do sunt. Nulla cillum anim excepteur adipisicing commodo culpa. Adipisicing pariatur qui voluptate + consectetur mollit quis sunt enim veniam ullamco. Duis nostrud anim aliqua adipisicing fugiat aute excepteur deserunt + enim occaecat pariatur ad. Qui aliquip aute labore minim ipsum in aute et. Aliqua laboris magna aute incididunt esse + ex. Eu ipsum occaecat aliquip enim aute.</p> + </div> + </div> + <div class="col-masonry"> + <div class="box-placeholder"> + <h2 class="text-grey text-md mb-sm">Masonry Item</h2> + <p>Labore cillum id non anim eiusmod officia. Nostrud laboris sint aliquip cillum magna. Minim sit labore proident culpa + non nisi cillum non officia est. Proident elit sit adipisicing est cupidatat ex cupidatat labore aliqua ad. + </p> + </div> + </div> + <div class="col-masonry"> + <div class="box-placeholder"> + <h2 class="text-grey text-md mb-sm">Masonry Item</h2> + <p>Officia tempor ea adipisicing ad sit qui dolore consequat irure veniam. Est sit magna deserunt sint aute commodo fugiat + fugiat irure sint dolore commodo amet. Duis cillum dolor quis consectetur dolor et et culpa id elit. Amet ut nulla + sunt non in non duis sit fugiat consequat. Velit incididunt ullamco sunt deserunt nulla ad adipisicing. In fugiat + ullamco deserunt amet. Ex voluptate amet magna minim ut incididunt veniam.</p> + </div> + </div> + <div class="col-masonry"> + <div class="box-placeholder"> + <h2 class="text-grey text-md mb-sm">Masonry Item</h2> + <p>Occaecat anim do cillum est dolore sint. Do ut proident exercitation est incididunt irure duis ea laborum minim cillum + est. Mollit irure non qui veniam labore eu elit veniam ea amet nisi esse labore. Elit ut nulla exercitation fugiat + cupidatat non cupidatat sint id minim.</p> + </div> + </div> + <div class="col-masonry"> + <div class="box-placeholder"> + <h2 class="text-grey text-md mb-sm">Masonry Item</h2> + <p>Voluptate incididunt tempor nulla voluptate esse dolor Lorem veniam voluptate adipisicing laborum in aliqua. Proident + voluptate exercitation mollit consectetur qui commodo minim. Ea esse veniam velit minim reprehenderit incididunt + reprehenderit do laborum aliqua. In quis et excepteur cupidatat qui duis. Pariatur Lorem laborum ut consectetur deserunt + consectetur officia tempor commodo aliqua aliqua ipsum.</p> + </div> + </div> + <div class="col-masonry"> + <div class="box-placeholder"> + <h2 class="text-grey text-md mb-sm">Masonry Item</h2> + <p>Ullamco officia esse ex reprehenderit reprehenderit cupidatat. Sunt excepteur sint consectetur ex aliqua excepteur. + Laborum id cupidatat ea reprehenderit sit eiusmod ad exercitation ullamco nostrud. Nulla tempor voluptate magna amet + culpa exercitation ad laborum in. Aliqua voluptate deserunt pariatur excepteur. Ullamco voluptate est dolore velit + aliquip tempor nostrud deserunt. Minim excepteur dolor nulla commodo incididunt ex ullamco excepteur cillum veniam + quis reprehenderit.</p> + </div> + </div> +</div> +<h3 class="my-md">Masonry with any kind of element</h3> +<div class="row-masonry row-masonry-xl-8 row-masonry-lg-5 row-masonry-md-4 row-masonry-sm-3 row-masonry-xs-2"> + <div class="col-masonry"> + <img src="assets/tmp/img/bg1.jpg" alt="" /> + </div> + <div class="col-masonry"> + <div class="box-placeholder"> + <h2 class="text-grey text-md mb-sm">Masonry Item</h2> + <p>Proident est cillum magna qui pariatur. Deserunt ut voluptate sint aliquip anim nisi consequat. Elit laboris anim anim + dolor incididunt. Nostrud qui labore qui cillum excepteur mollit excepteur consequat esse anim enim ad enim. Esse + qui mollit et minim mollit laboris reprehenderit laborum fugiat do id. Mollit labore proident cupidatat aliqua dolore + exercitation consectetur commodo sint mollit nostrud esse sunt. Nostrud fugiat duis sit excepteur excepteur mollit.</p> + </div> + </div> + <div class="col-masonry"> + <img src="assets/tmp/img/bg2.jpg" alt="" /> + </div> + <div class="col-masonry"> + <img src="assets/tmp/img/bg3.jpg" alt="" /> + </div> + <div class="col-masonry"> + <img src="assets/tmp/img/bg4.jpg" alt="" /> + </div> + <div class="col-masonry"> + <img src="assets/tmp/img/bg5.jpg" alt="" /> + </div> + <div class="col-masonry"> + <img src="assets/tmp/img/bg6.jpg" alt="" /> + </div> + <div class="col-masonry"> + <div class="box-placeholder"> + <h2 class="text-grey text-md mb-sm">Masonry Item</h2> + <p>Dolore consequat elit est qui dolore dolore tempor amet magna adipisicing non in commodo. Veniam sint et proident duis + eu nulla commodo sunt duis aliquip eiusmod. Occaecat incididunt deserunt consectetur non aliquip velit ullamco eu + sit labore proident exercitation. Cillum deserunt voluptate eu eiusmod sint in esse. Velit anim non Lorem proident + eu sit nisi Lorem aute do sit ea. Esse nostrud amet excepteur occaecat incididunt amet laborum aliqua qui mollit + ullamco. Labore incididunt ullamco non ipsum Lorem duis commodo adipisicing in.</p> + </div> + </div> + <div class="col-masonry"> + <div class="box-placeholder"> + <h2 class="text-grey text-md mb-sm">Masonry Item</h2> + <p>Amet est dolor id esse veniam duis eu ex velit. Id qui deserunt voluptate veniam. Voluptate ea ipsum in eiusmod enim + do velit commodo nulla sint. Fugiat ipsum esse pariatur voluptate exercitation magna ut proident consectetur et. + Sint qui elit exercitation anim duis nulla commodo aliqua excepteur pariatur.</p> + </div> + </div> + <div class="col-masonry"> + <img src="assets/tmp/img/bg7.jpg" alt="" /> + </div> + <div class="col-masonry"> + <img src="assets/tmp/img/bg8.jpg" alt="" /> + </div> + <div class="col-masonry"> + <div class="box-placeholder"> + <h2 class="text-grey text-md mb-sm">Masonry Item</h2> + <p>Culpa amet adipisicing consequat nisi dolore sunt amet labore officia aliquip elit tempor officia aliqua. Deserunt + laborum enim ut laboris duis. Cillum non proident dolor ullamco cillum nostrud in sint aliqua cillum. Proident magna + incididunt occaecat eiusmod cillum dolor tempor Lorem adipisicing nisi adipisicing mollit ex exercitation. Magna + nostrud est sunt incididunt culpa. Duis nulla elit ut ea adipisicing duis esse ullamco.</p> + </div> + </div> + <div class="col-masonry"> + <img src="assets/tmp/img/bg9.jpg" alt="" /> + </div> + <div class="col-masonry"> + <img src="assets/tmp/img/bg10.jpg" alt="" /> + </div> +</div> -- Gitblit v1.8.0