将图像组合在一起并在窗口加载时对图像进行动画处理

Fitting images together and animate images in on window load

本文关键字：图像 动画 处理 窗口 在一起 组合 加载      更新时间：2023-09-26

基本上，我试图让图像尽可能适合，但我无法做到。 我下载了砖石，但它似乎对我不起作用。 我只想把div打包在一起。 例如，在我的小提琴中，我希望左下角和右下角的猫向上。

另外，我希望当用户在页面加载时第一次查看它时，它就会动画化，如下所示：http://flipgallery.net/#demo

任何想法如何做？

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

.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;
}
<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>

这是来自 css 技巧，但我使用了你的图像

.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;
  }
}

这是你要找的吗？这是一个小提琴。

简单地说：

1-删除item-2类。

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

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

查看此演示。

你可以试试这个.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>
相关文章：