工业级招标演示
blame | history | patch | commit | commitdiff | ignore whitespace
fengxiang
2018-07-11 a3a8c23b196980732a795713a5eb5fe0c7075bf9 
 src/app/routes/style/gridmasonry/gridmasonry.component.html


New file


@@ -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>