發表圖片布局（1-9張）

阿新 • • 發佈：2017-08-20

ops sharp cas wid logs dir highlight width this

constructor(props) {
    super(props)
    this.state = {
      ImageUri:[],
    }


//render方法裏

render() {
    let ImageView=null;
    let ImageUri=this.state.ImageUri;
    let imgNum=ImageUri.length;
    console.log(ImageUri[0]);
    console.log(imgNum);
    switch (imgNum) {
      case 1:{
        ImageView=
        <View style={styles.ImageView}>
          <View style={{flexDirection:‘row‘}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[0]}}/>
            </View>
        </View>
      }break;
      case 2:{
        ImageView=
        <View style={styles.ImageView}>
          <View style={{flexDirection:‘row‘}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[0]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[1]}}/>
            </View>
        </View>
      }break;
      case 3:{
        ImageView=
        <View style={styles.ImageView}>
          <View style={{flexDirection:‘row‘}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[0]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[1]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[2]}}/>
            </View>
        </View>
      }break;
      case 4:{
        ImageView=
        <View style={styles.ImageView}>
          <View style={{flexDirection:‘row‘}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[0]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[1]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[2]}}/>
          </View>
          <View style={{flexDirection:‘row‘,marginTop:5}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[3]}}/>
          </View>
        </View>
      }break;
      case 5:{
        ImageView=
        <View style={styles.ImageView}>
          <View style={{flexDirection:‘row‘}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[0]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[1]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[2]}}/>
          </View>
          <View style={{flexDirection:‘row‘,marginTop:5}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[3]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[4]}}/>
          </View>
        </View>
      }break;
      case 6:{
        ImageView=
        <View style={styles.ImageView}>
          <View style={{flexDirection:‘row‘}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[0]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[1]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[2]}}/>
          </View>
          <View style={{flexDirection:‘row‘,marginTop:5}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[3]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[4]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[5]}}/>
          </View>
        </View>
      }break;
      case 7:{
        ImageView=
        <View style={styles.ImageView}>
          <View style={{flexDirection:‘row‘}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[0]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[1]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[2]}}/>
          </View>
          <View style={{flexDirection:‘row‘,marginTop:5}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[3]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[4]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[5]}}/>
          </View>
          <View style={{flexDirection:‘row‘,marginTop:5}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[6]}}/>
          </View>
        </View>
      }break;
      case 8:{
        ImageView=
        <View style={styles.ImageView}>
          <View style={{flexDirection:‘row‘}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[0]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[1]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[2]}}/>
          </View>
          <View style={{flexDirection:‘row‘,marginTop:5}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[3]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[4]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[5]}}/>
          </View>
          <View style={{flexDirection:‘row‘,marginTop:5}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[6]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[7]}}/>
          </View>
        </View>
      }break;
      case 9:{
        ImageView=
        <View style={styles.ImageView}>
          <View style={{flexDirection:‘row‘}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[0]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[1]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[2]}}/>
          </View>
          <View style={{flexDirection:‘row‘,marginTop:5}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[3]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[4]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[5]}}/>
          </View>
          <View style={{flexDirection:‘row‘,marginTop:5}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[6]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[7]}}/>
              <Image
              style={styles.image2}
              source={{uri:ImageUri[8]}}/>
          </View>
        </View>
      }break;
    }


//樣式布局
ImageView:{
      width:Dimensions.get(‘window‘).width-110,
      height:200,
      marginTop:10,
      marginLeft:5,
    },
    image1:{
      width:(Dimensions.get(‘window‘).width-110)/3,
      height:(Dimensions.get(‘window‘).width-110)/3,
    },
    image2:{
      width:(Dimensions.get(‘window‘).width-110)/3,
      height:(Dimensions.get(‘window‘).width-110)/3,
      marginLeft:5,
    }

發表圖片布局（1-9張）

ops sharp cas wid logs dir highlight width this constructor(props) { super(props) this.state = { ImageUri:[], } //re

瀑布流布局（1）

math tin 最小 parent sele css3 http win 寬度前言完成一個動漫人物的瀑布流布局，分別通過原生JavaScript、Css3和Jquery方式實現。首先是使用JavaScript。一、創建基本框架 1 HTML結構 <main&

響應式布局（css3、html5）流程

edi png images -s min 設置 ont 條件語句 scale 第一步：確定需要兼容的設備類型、屏幕尺寸設備類型：包括移動設備（手機、平板）和pc。對於移動設備，設計和實現的時候註意增加手勢的功能。屏幕尺寸：包括各種手機屏幕的尺寸（包括橫向和豎向）、各種

C之內存布局（三十六）

C語言內存布局 .text .bss .data 我們在上節中說到了棧區、堆區以及靜態存儲區，那麽我們來看看在程序文件的一般布局。我們先來看看不同代碼在可執行程序中的對應關系，如下圖所示我們看到程序中的經過初始化的全局變量和加 static 修飾的初始化過

flex布局、grid布局（入門初體驗）

eas style 都是 str justify new 多行 ever template 兩種布局都可以極大簡化排版布局的步驟，都是直接作用於自己的排版（比如：現在 ul 上，ul>li 就會自動進行排版） flex布局：一般用於單行排版 display: fle

CSS百分比padding實現比例固定圖片自適應布局（轉載）

缺失 com 我們展現 auto ie6 iphone7 恰恰備案一、CSS百分比padding都是相對寬度計算的在默認的水平文檔流方向下，CSS margin和padding屬性的垂直方向的百分比值都是相對於寬度計算的，這個和top, bottom等屬性的百分比

首頁列表顯示全部問答，完成問答詳情頁布局（12.1）

lis 前端 ren 技術 url styles 數據庫查詢 col min 首頁列表顯示全部問答：將數據庫查詢結果傳遞到前端頁面 Question.query.all() 前端頁面循環顯示整個列表。問答排序 shouye.html {% extends ‘base.

Android UI布局-1.1線性布局（一）-線性布局基礎

dev 其中兩種 wid alt encoding 基本 ofo version LinearLayout，中文意思就是線性布局，是一種最簡單、最常用的布局方式，它將其中的組件以線性方式進行排列。其中有垂直和水平兩種布局方向，可以使用orientation屬性來對它的方向

css margin負邊距之列布局（列表、聖杯、雙飛翼）

door ont oct class containe resp 固定寬度單元自適應技術服務於應用，技術來源於應用。應用1：當接到設計師給的設計圖時（如下圖），發現每列左右和上下文保持一致，頓時整個心情就不好了。因為要兼顧響應式，即沒辦法保證每個列表單元的具體位置，

spring-oauth-server入門（1-9）CLIENT_模式下 authorities的產生

image ring .cn server -o ges images com cnblogs spring-oauth-server入門（1-9）CLIENT_模式下 authorities的產生

使用rem來做響應式布局（js動態加載）

console n) 顯示效果效果 width 動態加載 scrip mco color 1 <script> 2 ;(function (doc,win) { 3 var htmlEle=doc.documentElement; 4

Flex 實現表格布局（微信小程序）

class eight 技術 con log rec color order blog 微信小程序自己開發了一套 wxml + wxss，對許多 HTML 標簽和 CSS 屬性不支持。不支持 table 標簽，推薦使用 flex 布局。自然而然的想法：flex

Flex布局（引用阮一峰大神）

title set -c itl asset 遊戲 www 一個 sset Flex 布局教程：語法篇 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex 布局教程：實例篇 http://www.rua

rem手機端頁面自適應布局（待修正下一篇完美布局）

ans 手機頁面元素 blog 底部 max cli chang 都是 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <met

html5 響應式布局（媒體查詢）

href 高級 ont spa 問題界面 p s ide display 響應式布局響應式布局，簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的。響應式布局可以為不同終端

響應式布局之浮動聖杯布局（雙飛翼布局）—-自適應寬度布局

由於部分 gin asi 禁用代碼寬度 sof cin 前端開發中自適應布局在實際應用中越來越普遍，特別是隨著更多高級瀏覽器的出現html5和css3得到了更好的應用。聖杯布局有個好處，完全符合前端開發中漸進增強的理念，由於瀏覽器解析是從DOM的上至下，這樣聖杯布局

linux系統進程的內存布局（轉）

觸發後者請求但是釋放內存存儲 .org 遵從流行摘自http://www.cnblogs.com/diegodu/p/4552490.html 僅僅是學習收藏。內存管理模塊是操作系統的心臟；它對應用程序和系統管理非常重要。今後的幾篇文章中，我將著眼於實際

CSS3 Flex布局（項目）

target 縮小如果 height follow item 不足是否項目一、order屬性 order屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。二、flex-grow屬性 flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間

2017秋-軟件工程第七次作業（1）-【探路者】貪吃蛇阿爾法發布展示（視頻展示）

軟件工程 lin 使用 .html -1 target 背景音樂 targe 核心 Part One 【探路者】選題展示視頻鏈接： http://www.iqiyi.com/w_19ruzx6xud.html Part Two 【貪吃蛇】阿爾法發布視頻截圖 1視頻的前半部

HTML-頁面布局（11月5日）

html一、盒子模型：整體的寬=margin-left（right）+padding-left（right）+border+content整體的高=margin-top（bottom）+padding-top（bottom）+border+content二、頁面布局：（1）標準流：按照原先格式排版塊兒元素等一

發表圖片布局（1-9張）

相關推薦