Photo-Grid布局CSS

时间：2016-03-28 04:07:43

标签： html css

所以我有这个用CSS制作的光电网，它的工作正常除了我希望它显示如下：

1 | 2 | 3
4 | 5 | 6

而不是

1 | 3 | 5
2 | 4 | 6

我和css搞砸了一段时间，但我无法做到。这是代码：

HTML： 

<section id="photos">
<img src="imgs/logo1.jpg" alt="">
<img src="imgs/logo2.png" alt="">
<img src="imgs/logo3.png" alt="">
<img src="imgs/logo4.jpg" alt="">
</section>

CSS 

#photos {
  /* Prevent vertical gaps */
  line-height: 0;

  -webkit-column-count: 5;
  -webkit-column-gap:   0px;
  -moz-column-count:    5;
  -moz-column-gap:      0px;
  column-count:         5;
  column-gap:           0px;  
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}

2 个答案:

答案 0 :(得分：1)

我建议通过CSS更好地控制元素的顺序是使用flexbox。它的相关flex属性为flex-direction和order。

Flex方向示例：

.container {
    display: -webkit-flex; /* Safari */    
    display: flex;
    outline: 1px dashed black;
    color: white;
    font-size: 2em;
}

.row {
    -webkit-flex-direction: row; /* Safari 6.1+ */
    flex-direction: row;
    background: tomato;
}

.row-reverse {
    -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
    flex-direction: row-reverse;
    background: gold;
}

.column {
    -webkit-flex-direction: column; /* Safari 6.1+ */
    flex-direction: column;
    background: hotpink;
}

.column-reverse {
    -webkit-flex-direction: column-reverse; /* Safari 6.1+ */
    flex-direction: column-reverse;
  background: purple;
}

.container div {
    padding: 5px;
    outline: 1px solid cyan;  
}
<div class="container row">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div>
</div>

<div class="container row-reverse">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div>
</div>

<div class="container column">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div>
</div>

<div class="container column-reverse">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div>
</div>

Flex订单示例：

.orderA, .orderB, .orderC {
  outline: 1px dashed black;
  display: -webkit-flex; /* Safari */
  display: flex;
  font-size: 2em;
}

.orderA .a {
  -webkit-order: 1;
  order: 1;  
}

.orderA .b {
  -webkit-order: 2;
  order: 2;  
}

.orderA .c {
  -webkit-order: 3;
  order: 3;  
}

.orderA .d {
  -webkit-order: 4;
  order: 4;  
}

.orderA .e {
  -webkit-order: 5;
  order: 5;  
}

.orderA .f {
  -webkit-order: 6;
  order: 6;  
}

.orderB .a {
  -webkit-order: 6;
  order: 6;  
}

.orderB .b {
  -webkit-order: 5;
  order: 5;  
}

.orderB .c {
  -webkit-order: 4;
  order: 4;  
}

.orderB .d {
  -webkit-order: 3;
  order: 3;  
}

.orderB .e {
  -webkit-order: 2;
  order: 2;  
}

.orderB .f {
  -webkit-order: 1;
  order: 1;  
}

.orderC .a {
  -webkit-order: 2;
  order: 2;  
}

.orderC .b {
  -webkit-order: 4;
  order: 4;  
}

.orderC .c {
  -webkit-order: 6;
  order: 6;  
}

.orderC .d {
  -webkit-order: 1;
  order: 1;  
}

.orderC .e {
  -webkit-order: 3;
  order: 3;  
}

.orderC .f {
  -webkit-order: 5;
  order: 5;  
}

.orderA div {
  background: skyblue;
  outline: 1px solid hotpink;
  padding: 5px;
}

.orderB div {
  background: gold;
  outline: 1px solid hotpink;
  padding: 5px;
}

.orderC div {
  background: greenyellow;
  outline: 1px solid hotpink;
  padding: 5px;
}
<div class="orderA">
<div class=a>1</div><div class=b>2</div><div class=c>3</div><div class=d>4</div><div class=e>5</div><div class=f>6</div>
</div>

<div class="orderB">
<div class=a>1</div><div class=b>2</div><div class=c>3</div><div class=d>4</div><div class=e>5</div><div class=f>6</div>
</div>

<div class="orderC">
<div class=a>1</div><div class=b>2</div><div class=c>3</div><div class=d>4</div><div class=e>5</div><div class=f>6</div>
</div>

图片的Flex网格，可以轻松应用flex-direction和order（如果需要）：

body {
  width: 100%;
  height: 100vh;
  margin: 0;
}

.container {
    display: -webkit-flex; /* Safari */    
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-around; /* Safari 6.1+ */    
    justify-content: space-around;
}

.container div {
  -webkit-flex: 0 0 calc(33.3% - 20px); /* Safari 6.1+ */
  -ms-flex: 0 0 calc(33.3% - 20px); /* IE 10 */ 
  flex: 0 0 calc(33.3% - 20px);  
  background: lavender;
  border: 2px solid black;
  box-sizing: border-box;
  margin: 10px;
  font-size: 2em;
  text-align: center;
}
<div class="container">
  <div>1 <img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div>2 <img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div>3 <img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div>4 <img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div>5 <img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div>6 <img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
</div>

答案 1 :(得分：0)

如果您喜欢马赛克风格，我会通过 Javascript 为您提供另一种订购图片的方式： “总是把图像放到最短的列上。”

  1. 设置图像位置是绝对的，而Div容器是相对的。
  2. 使用数组存储每列的高点：var columnsHigh = [0,0,0]
  3. 浏览图像列表，在每一步得到一个并将其放在坐标{x，y}的点上，其中y = min（columnsHigh）和x = 100 /（minPos（columnsHigh，y））（minPos会找到数组columsHigh中最短列的索引。）
  4. 更新容器的高度和最短的列高加上图像的高度。

    5. 演示代码 

    $(function(){
	mosaicGrid('.container', 'img');
});

function mosaicGrid(selector,target) {
  var cols = [0,0,0,0];
  var allTarget = $(selector).find(target);
  if (0 === allTarget.length) 
    return;
  allTarget.one('load', function(e){    
      var pos = minPos(cols);
      var x = pos * 100/cols.length;
      var y = cols[pos];
      $(this).css({left: x + "%", top: y + "px", width: Math.floor(100/cols.length)+"%"});      
      cols[pos] = cols[pos] + $(this).height();
      $(selector).height(Math.max.apply(null, cols) );      
      $(this).off(e);
  }).each(function(){
    if(this.complete)
      $(this).trigger('load');
  });
}
function minPos(arr) {
  var min = Math.min.apply(null, arr);
  for(var i = 0; i < arr.length; i++) {
    if (min === arr[i])
      return i;
  }
}
    .container {
  position: relative;
  width: 100%;
  height: 50px;
}

img {
  position: absolute;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <img src="http://www.warrenphotographic.co.uk/photography/cats/30081.jpg" alt="">
  <img src="http://iwallhd.com/stock/yellow-labrador-retriever-puppy-white-background.jpg" alt="">
  <img src="http://i.imgur.com/nZlaeSH.jpg" alt="">
  <img src="http://www.cuter.cn/wp-content/uploads/2013/08/1375453731.jpg" alt="">
  <img src="https://puppydogweb.com/wp-content/uploads/2015/05/puppy-wallpaper-dancing-little-dogs-.jpg" alt="">
  <img src="http://www.petsworld.in/blog/wp-content/uploads/2015/03/How-To-Make-Your-Puppy-Gain-Weight.jpg" alt="">
  <img src="http://www.dogster.com/wp-content/uploads/2015/05/dalmatian-puppies-04.jpg" alt="">
  <img src="http://indiabright.com/wp-content/uploads/2015/10/Gallery-of-Dogs-Balancing-Cupcakes-539445.jpg" alt="">
  <img src="https://s-media-cache-ak0.pinimg.com/236x/63/60/39/6360396daf54afd024d181b6567a8c28.jpg" alt="">
  <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSr7jvGrFyqNOWgqfMD5t5zgOOf66pfGLVM8Jv0Uj16gfufLQTF" alt="">
  <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR24wc_yoDK_i3nm6o6IV77ggd9KzBiBR9wwBlU3-bIgIEz9bMT" alt="">
  <img src="http://justcuteanimals.com/wp-content/uploads/2015/01/puppy-love-cute-yellow-lab-puppies-pups-dogs-animals-pictures-pics.jpg" alt="">
  <img src="http://omgcutethings.com/wp-content/uploads/2014/08/puppy-love-005-08092014.jpg" alt="">
  <img src="http://www.dallasvoice.com/wp-content/uploads/2015/03/puppy-2.jpg" alt="">
  <img src="http://www.perseyspetgrooming.com/images/puppy.png" alt="">
</div>

相关问题
最新问题