Question

基本上，我试图让图像尽可能地适应，但我还没有能够做到。我下载了砖石，但它似乎对我不起作用。我只是想将div组合在一起。例如，在我的小提琴中，我希望左下角和右下角上升。

此外，我希望在用户第一次在页面加载时查看动画时使其动画，如下所示： http://flipgallery.net/#demo

任何想法如何做？

小提琴：https://jsfiddle.net/jzhang172/0jL2dyg1/

＆＃13;

.grid{
display:flex;
flex-direction:row;
justify-content:center;
max-width:500px;
flex-wrap:wrap;
}

.grid-item{
  height:150px;
  width:150px;
  overflow:hidden;

}
.grid-item img{
  height:100%;
}
.item-2{
  height:300px;
}

＆＃13;

<div class="grid">
  <div class="grid-item"><img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"></div>
  <div class="grid-item item-2"><img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg"></div>
  <div class="grid-item"><img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></div>
  <div class="grid-item"><img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></div>
    <div class="grid-item"><img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></div>
      <div class="grid-item"><img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></div>
</div>

＆＃13;

Answer 1

你可以尝试这个.masonory例子

<style type="text/css">
.grid {
  max-width:500px;
}
.grid:after {
  content: '';
  display: block;
  clear: both;
}
.grid-item{
  height:100px;
  width: 100px;
  overflow:hidden;
}
.grid-sizer{
  width: 100px;
}
.item-2{
  height:200px;
}
.item-3{
  width: 300px;
}
.item-4{
  width: 400px;
}
.grid-item img{
  height:100%;
  width: 100%;
}
</style>
<div class="grid">
    <div class="grid-sizer"></div>
    <div class="grid-item"><img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"></div>
    <div class="grid-item item-2"><img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></div>
    <div class="grid-item"><img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg"></div>
    <div class="grid-item"><img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></div>
    <div class="grid-item"><img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></div>
    <div class="grid-item"><img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></div>
    <div class="grid-item item-3"><img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></div>
    <div class="grid-item item-4"><img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></div>
    <div class="grid-item"><img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"></div>
    <div class="grid-item"><img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"></div>
    <div class="grid-item"><img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"></div>
</div>

<script type="text/javascript" src="jquery.1.11.3.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script src="masonry.pkgd.min.js"></script>
<script type="text/javascript">
$('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer'
}).masonry("layout");
</script>

Answer 2

这是来自css-tricks，但我使用了您的图片

HTML

<section id="photos">
  <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg">
  <img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg">
  <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
  <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
  <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
  <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
</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;
  }
}

这是你在找什么？ Here是一个小提琴。

Answer 3

简单地：

1-删除item-2课程。

2-将margin-bottom和margin-left属性添加到grid-item类：

.grid-item{
  height:150px;
  width:150px;
  overflow:hidden;
  margin-bottom: 15px;
  margin-left: 15px;
}

查看此demo。

将图像拟合在一起并在窗口加载时激活图像

3 个答案: