2. 程式人生 > >css3實現圖片木桶布局

css3實現圖片木桶布局

阿新 • • 發佈：2017-11-18
wrap ado 設置 ctype adding selector 前端學習 i++ creat

思路：


1、容器flex布局
2、圖片定高、超出換行
3、圖片都設置 flex-grow: 1; 以充滿整行
4、圖片都設置 object-fit: cover; 以解決圖片變形
5、容器 :after 偽類 設置 flex-grow: 9999; 且值足夠高 以解決最後一行圖片數量少時仍然充滿整行過於扁長

<!DOCTYPE html> <script> window.navigator.appVersion.indexOf(‘Trident‘) != -1 && alert(‘請用谷歌或火狐新版打開！‘); </script> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; } body{ padding: 50px 0; overflow-x: hidden; } .wrap{ display: flex; flex-wrap: wrap; } .wrap img{ margin: 3px; padding: 5px; height: 200px; background: #ccc; flex-grow: 1; object-fit: cover; transition: .3s; } .wrap:after{ display: block; content: ‘‘; flex-grow: 9999; } .wrap img:hover{ transform: scale(1.2); box-shadow: 0 0 20px #fff; z-index: 9999; } </style> </head> <body> <div class="wrap"></div> <script> var wrap = document.querySelector(‘.wrap‘); var src = [‘//cdn.attach.qdfuns.com/notes/pics/201710/13/093715yf2jt47tttj9lyfj.jpg‘,‘//cdn.attach.qdfuns.com/notes/pics/201710/13/092835ebbkfzjtb4okwj2b.jpg‘,‘//cdn.attach.qdfuns.com/notes/pics/201710/13/092835beqzk6kyjkbwr5bw.jpg‘,‘//cdn.attach.qdfuns.com/notes/pics/201710/13/092835nshkii0i2k0dsikn.jpg‘,‘//cdn.attach.qdfuns.com/notes/pics/201710/13/093653k6ztcd7x7czebkfh.jpg‘] for(var i=0; i<Math.floor(Math.random()*10+30); i++){ var img = document.createElement(‘img‘); img.src = src[Math.floor(Math.random()*5)]; wrap.appendChild(img); } </script> </body> </html>

WEB前端學習交流群21 598399936

css3實現圖片木桶布局

相關推薦

css3實現圖片木桶布局

wrap ado 設置 ctype adding selector 前端學習 i++ creat 思路： 1、容器flex布局2、圖片定高、超出換行3、圖片都設置 flex-grow: 1; 以充滿整行4、圖片都設置 object-fit: cover; 以解決圖片變形5、

純CSS3實現瀑布流布局

aso break bre ins png 技術 ide mas 純c html頁面結構 <div class="masonry"> <div class="item"> <img src="" >

【js 實踐】js 實現木桶布局

cto enter 最後一行 scrip fine inner get code 兩個 還有兩個月左右就要準備實習了，所以特意練一練，今天終於搞定了js 的木桶布局了 這一個是按照一個插件的規格去寫的以防以後工作需要，詳細的解釋在前端網這裏 http://www.qdfun

IOS布局筆記一（代碼實現自己主動布局）

tde tps space sina idt normal title 2014年 otto 1.將一個試圖放置在其父視圖的中央位置,使用限制條件。 2.創建兩個限制條件:一個是將目標視圖的 center.x 位置排列在其父視圖的 center.x 位置,而且另

Notification的基本用法以及使用RemoteView實現自定義布局

解決 edi ngs 取消 ets lsp 過程 net tde Notification的作用 Notification是一種全局效果的通知，在系統的通知欄中顯示。既然作為通知，其基本作用有： 顯示接收到短消息、即時信息等 顯示客戶端的推送（廣告、優惠、新聞等）

CSS實現橫列布局的方法總結

屬性 F12 child png pos position width end ges 一、使用float實現橫列布局的方法 如下面所示：DIV1和DIV2都可以選擇向左或者向右浮動50%來實現展示在同一行 div1 div2 實現下面圖片中布局的css樣式

實現 Bootstrap 基本布局

attr wbs 圖片 最終 .html 這一 cti dia http 1. 創建基本的頁面 我們先創建一個基本的 HTML 模板頁面，使用 sublime + emmet 可以直接創建這個頁面。 1.1 新建一個文件， Ctrl + N 1.2 保存到頁面文件中，

css3實現圖片的變大變小

out transform head body inner mar orm add gin 主要是使用 css3的animation，scale等於1是原圖大小，大於1是把圖片放大，小於1 是把圖片縮小。animation-delay用來延遲5秒觸發這個動畫 <

Rem是如何實現自適應布局的？

span 理解 radi brush 研究 工程師 結果 -s sha 作為前端工程師的我們，在h5頁面布局的過程中會使用rem布局，大家都知道rem是相對長度單位，但是作為前端的我們該如何去讓rem布局自適應iphone4、iphone6、iphone6、iphone6p

原生JS實現瀑布流布局

jpg 相對布局 復制 圖像 == borde 一行 原生 per 一.瀑布流之準備工作 　　 首先聲明下, 為了方便演示和聯系, 我使用的是本地圖片, 如果大家有需要的話可以嘗試著寫下網絡的, 不過本地和遠端的大致是相同的. 那麽我就來簡單介紹下本地的瀑布流效果吧,

利用視口單位實現適配布局

round 凹凸 情況 響應式 項目開發 通過 需要 單位換算 渲染 利用視口單位實現適配布局 by Tingglelaoo on 2017-04-28 響應式布局的實現依靠媒體查詢（ Media Queries ）來實現，選取主流設備寬度尺寸作為斷點針對

css實現三列布局

1.  使用float實現三列左右固定寬高，中間自適應寬度 <section class="wrapper"> <div class="left"></div> <div class="right"></div> <

CSS3 實現圖片倒影炫酷特效

-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250

js實現瀑布流布局

text att else oda rom 流布局 數據 his type window.onload = function () { var d1 = new Waterfall(); d1.init();};//構造函數function Waterfall(

[程式碼] 使用css3實現圖片輪播

使用css3實現圖片輪播 前言：實現圖片輪播的方式有很多種 ，例如js ，css 等等。 本文主要講述使用純css3實現輪播圖 工具介紹： 使用的編輯器： Hbuilder 進入正題 htm

圖片，布局，string等）打進jar包

listen agen pac sch edi ima nco tco equal 解決如下：由於打包出來的jar只有源代碼的.class 文件，不包含資源文件，我們就把jar包中用到的資源放到你使用 該jar的工程裏面。然後通過反射即可，這裏給出反射類： public c

純css3實現圖片輪播

用css3的動畫可以實現圖片輪播 無非就是兩種型別： 　左右滾動型別，　漸變型別 １　左右滾動 定義一個大盒子 在一個小盒子裡面　裝３張圖片（這裡用３張圖片為例子） 三張圖片可以向左浮動，大盒子　overflow :hidden 小盒子增加css3

純css3實現圖片自動切換

實現圖片自動切換需要用到的主要是css3裡面的過渡這一節的內容。 大致思路是這樣的： 1、將圖片設定為li的背景圖片； 2、規定一個@keyframes的規則使得圖片按照這個規則進行切換； 3、設定每

純CSS3實現圖片展示特效

Web瀏覽器端的特效越來越讓人興奮，通過CSS和JavaScript，各種意想不到的絢麗效果都能用簡單的幾句程式碼完成。本文中要實現的一個純CSS3的圖片展示特效，以前只能用JavaScript實現，可想而知會受到多方面的限制，特別是效能。而今天我們將用簡單的CSS3程式碼實現，你會發現它的動畫效果在現代

css3實現圖片3d翻轉效果

@charset: "utf-8"; * { margin: 0; padding: 0; box-sizing: border-box; } ul, ol { list-style: none; } img { border: none; } body {