如何避免空白空间并填补图像之间的空白
我正在使用Masonry + Isotope订购马赛克图像。
我有3种不同的图像尺寸：
width:220px;
height: 168px;
width:220px;
height: 336px;
width:440px;
height: 168px;
我认为当列宽为440px时，它会很好地工作，但有时马赛克会有空白区域。 Masonry / Isotope正在工作，因为我可以，重新排序/过滤元素。
您可以看到问题的屏幕截图。
你可以在这里看到一个jsfiddle： https://jsfiddle.net/Vinyl/fjvcjezj/embedded/result/
以及此问题附带的代码段。
$(document).ready(function() {
var $grid = $('.grid').imagesLoaded(function() {
// init Isotope after all images have loaded
$grid.isotope({
// options...
itemSelector: '.grid-item',
//layoutMode: 'packery',
//percentPosition: true,
columnWidth: 440,
gutter: 10
});
});
$('.menu_projets a').click(function(e) {
e.preventDefault();
$('.menu_projets a').removeClass('submenu_active');
$(this).addClass('submenu_active');
});
$('#grid-item').click(function() {
$grid.isotope({
filter: '*'
});
});
$('#cat_1').click(function() {
$grid.isotope({
filter: '.cat_1'
});
});
$('#cat_2').click(function() {
$grid.isotope({
filter: '.cat_2'
});
});
$('#cat_3').click(function() {
$grid.isotope({
filter: '.cat_3'
});
});
$('#cat_4').click(function() {
$grid.isotope({
filter: '.cat_4'
});
});
$('#cat_5').click(function() {
$grid.isotope({
filter: '.cat_5'
});
});
});grid-item {
float: left;
/* width: 50px;
height: 50px;*/
}
.grid_item_1 {
width: 220px;
height: 168px;
}
.grid_item_2 {
width: 220px;
height: 336px;
}
.grid_item_3 {
width: 440px;
height: 168px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/packery/1.4.3/packery.pkgd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js"></script>
<ul class="menu_projets filter-button-group">
<li id="grid-item"><a href="tous">tous</a>
</li>
<li id="cat_1"><a href="#">équipement</a>
</li>
<li id="cat_2"><a href="#">habitat</a>
</li>
<li id="cat_3"><a href="#">activités</a>
</li>
<li id="cat_4"><a href="#">projets urbains</a>
</li>
<li id="cat_5"><a href="#">espaces publics</a>
</li>
</ul>
<div class="container container_top">
<div class="row">
<div class="grid">
<div class="grid-item cat_1 grid_item_3">
<a href="projets/1-87-ranzay-2030.php" class="bwWrapper">
<img src="http://placehold.it/440x168/3498db/fff" alt="Ranzay 2030">
</a>
</div>
<div class="grid-item cat_5 grid_item_3">
<a href="projets/5-73-palettes.php" class="bwWrapper">
<img src="http://placehold.it/440x168/e74c3c/fff" alt="Palettes">
</a>
</div>
<div class="grid-item cat_4 grid_item_3">
<a href="projets/4-61-eco-quartier-des-lauriers.php" class="bwWrapper">
<img src="http://placehold.it/440x168/f1c40f/fff" alt="Eco-quartier des Lauriers ">
</a>
</div>
<div class="grid-item cat_4 grid_item_3">
<a href="projets/4-66-ilot-ucear.php" class="bwWrapper">
<img src="http://placehold.it/440x168" alt="Ilot UCEAR">
</a>
</div>
<div class="grid-item cat_3 grid_item_1">
<a href="projets/3-32-pri-malboire.php" class="bwWrapper">
<img src="http://placehold.it/220x168/9b59b6/fff" alt="PRI Malboire">
</a>
</div>
<div class="grid-item cat_3 grid_item_2">
<a href="projets/3-63-siege-vannes-agglo.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Siège Vannes Agglo">
</a>
</div>
<div class="grid-item cat_3 grid_item_1">
<a href="projets/3-64-we-45.php" class="bwWrapper">
<img src="http://placehold.it/220x168/9b59b6/fff" alt="WE 45">
</a>
</div>
<div class="grid-item cat_2 grid_item_2">
<a href="projets/2-20-le-vallon-des-dervallieres.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Le Vallon des Dervallières">
</a>
</div>
<div class="grid-item cat_1 grid_item_2">
<a href="projets/1-31-service-de-restauration.php" class="bwWrapper">
<img src="http://placehold.it/220x336/9b59b6/fff" alt="Service de restauration ">
</a>
</div>
<div class="grid-item cat_1 grid_item_2">
<a href="projets/1-34-base-nautique-de-vioreau.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Base nautique de Vioreau">
</a>
</div>
<div class="grid-item cat_1 grid_item_2">
<a href="projets/1-50-base-nautique.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Base nautique">
</a>
</div>
<div class="grid-item cat_2 grid_item_3">
<a href="projets/2-17-le-vallon-des-garettes-vd2.php" class="bwWrapper">
<img src="http://placehold.it/440x168" alt="Le Vallon des Garettes VD2">
</a>
</div>
<div class="grid-item cat_1 grid_item_2">
<a href="projets/1-29-groupe-scolaire.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Groupe scolaire ">
</a>
</div>
<div class="grid-item cat_3 grid_item_2">
<a href="projets/3-62-delegation-territoriale-du-vignoble.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Délégation territoriale du Vignoble">
</a>
</div>
<div class="grid-item cat_4 grid_item_3">
<a href="projets/4-65-parc-technologique-bas-carbone.php" class="bwWrapper">
<img src="http://placehold.it/440x168" alt="Parc technologique bas carbone ">
</a>
</div>
<div class="grid-item cat_3 grid_item_2">
<a href="projets/3-78-immeuble-de-bureaux.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Immeuble de bureaux">
</a>
</div>
<div class="grid-item cat_5 grid_item_1">
<a href="projets/5-70-restructuration-du-port-de-la-gravette.php" class="bwWrapper">
<img src="http://placehold.it/220x168" alt="Restructuration du port de la Gravette">
</a>
</div>
<div class="grid-item cat_2 grid_item_2">
<a href="projets/2-77-les-portes-de-la-seiche.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Les portes de la Seiche">
</a>
</div>
<div class="grid-item cat_3 grid_item_1">
<a href="projets/3-83-vital-parc-monteux.php" class="bwWrapper">
<img src="http://placehold.it/220x168" alt="Vital Parc Monteux">
</a>
</div>
<div class="grid-item cat_2 grid_item_2">
<a href="projets/2-88-les-maquisards.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Les Maquisards">
</a>
</div>
<div class="grid-item cat_2 grid_item_1">
<a href="projets/2-85-logements-metairies.php" class="bwWrapper">
<img src="http://placehold.it/220x168" alt="Logements Métairies">
</a>
</div>
<div class="grid-item cat_2 grid_item_2">
<a href="projets/2-18-le-vallon-d-herme.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Le Vallon d'Hermé">
</a>
</div>
<div class="grid-item cat_4 grid_item_2">
<a href="projets/4-53-les-jardins-de-gaia.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Les Jardins de Gaïa">
</a>
</div>
<div class="grid-item cat_5 grid_item_2">
<a href="projets/5-72-restructuration-des-espaces-portuaires.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Restructuration des espaces portuaires">
</a>
</div>
<div class="grid-item cat_1 grid_item_1">
<a href="projets/1-57-realisation-d-un-centre-touristique.php" class="bwWrapper">
<img src="http://placehold.it/220x168" alt="Réalisation d'un centre touristique ">
</a>
</div>
<div class="grid-item cat_4 grid_item_2">
<a href="projets/4-48-amenagement-du-coeur-de-bourg.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Aménagement du coeur de bourg ">
</a>
</div>
<div class="grid-item cat_2 grid_item_1">
<a href="projets/2-24-les-nympheas.php" class="bwWrapper">
<img src="http://placehold.it/220x168" alt="Les Nymphéas">
</a>
</div>
<div class="grid-item cat_4 grid_item_1">
<a href="projets/4-51-reconversion-du-site-de-l-usine-gep.php" class="bwWrapper">
<img src="http://placehold.it/220x168" alt="Reconversion du site de l’usine GEP ">
</a>
</div>
<div class="grid-item cat_4 grid_item_2">
<a href="projets/4-52-le-clos-de-la-rouliere.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Le Clos de la Roulière ">
</a>
</div>
<div class="grid-item cat_3 grid_item_1">
<a href="projets/3-82-mediacampus.php" class="bwWrapper">
<img src="http://placehold.it/220x168" alt="Médiacampus">
</a>
</div>
<div class="grid-item cat_1 grid_item_2">
<a href="projets/1-33-restaurant-scolaire.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Restaurant scolaire ">
</a>
</div>
<div class="grid-item cat_3 grid_item_2">
<a href="projets/3-36-carre-de-coueron.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Carré de Couëron">
</a>
</div>
<div class="grid-item cat_1 grid_item_3">
<a href="projets/1-28-maison-des-associations.php" class="bwWrapper">
<img src="http://placehold.it/440x168" alt="Maison des associations">
</a>
</div>
<div class="grid-item cat_1 grid_item_2">
<a href="projets/1-47-restaurant-scolaire.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Restaurant scolaire ">
</a>
</div>
<div class="grid-item cat_2 grid_item_2">
<a href="projets/2-13-les-rainettes.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Les Rainettes">
</a>
</div>
<div class="grid-item cat_2 grid_item_1">
<a href="projets/2-25-maison-d.php" class="bwWrapper">
<img src="http://placehold.it/220x168" alt="Maison D">
</a>
</div>
<div class="grid-item cat_3 grid_item_1">
<a href="projets/3-30-le-medley.php" class="bwWrapper">
<img src="http://placehold.it/220x168" alt="Le Medley">
</a>
</div>
<div class="grid-item cat_5 grid_item_2">
<a href="projets/5-43-reamenagement-de-la-rd-857.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Réaménagement de la RD 857">
</a>
</div>
<div class="grid-item cat_5 grid_item_3">
<a href="projets/5-44-reamenagement-du-front-de-mer.php" class="bwWrapper">
<img src="http://placehold.it/440x168" alt="Réaménagement du front de mer">
</a>
</div>
<div class="grid-item cat_5 grid_item_3">
<a href="projets/5-49-rue-du-gue.php" class="bwWrapper">
<img src="http://placehold.it/440x168" alt="Rue du Gué">
</a>
</div>
<div class="grid-item cat_5 grid_item_1">
<a href="projets/5-41-amenagement-de-la-rue-de-rennes.php" class="bwWrapper">
<img src="http://placehold.it/220x168" alt="Aménagement de la rue de Rennes">
</a>
</div>
<div class="grid-item cat_5 grid_item_1">
<a href="projets/5-45-reamenagement-du-front-de-mer.php" class="bwWrapper">
<img src="http://placehold.it/220x168" alt="Réaménagement du front de mer ">
</a>
</div>
<div class="grid-item cat_2 grid_item_2">
<a href="projets/2-23-operation-centre-ville.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Opération Centre ville">
</a>
</div>
<div class="grid-item cat_1 grid_item_2">
<a href="projets/1-76-mediatheque-associative.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Médiathèque associative">
</a>
</div>
<div class="grid-item cat_2 grid_item_3">
<a href="projets/2-19-ker-pradenn.php" class="bwWrapper">
<img src="http://placehold.it/440x168" alt="Ker Pradenn">
</a>
</div>
<div class="grid-item cat_1 grid_item_2">
<a href="projets/1-54-restructuration-des-espaces-portuaires.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Restructuration des espaces portuaires">
</a>
</div>
<div class="grid-item cat_2 grid_item_1">
<a href="projets/2-22-villavenir-atlantique.php" class="bwWrapper">
<img src="http://placehold.it/220x168" alt="Villavenir + Atlantique">
</a>
</div>
<div class="grid-item cat_1 grid_item_3">
<a href="projets/1-68-eglise-st-vincent-de-paul.php" class="bwWrapper">
<img src="http://placehold.it/440x168" alt="Eglise St Vincent de Paul ">
</a>
</div>
<div class="grid-item cat_3 grid_item_3">
<a href="projets/3-74-bureaux-mc2.php" class="bwWrapper">
<img src="http://placehold.it/440x168" alt="Bureaux MC2">
</a>
</div>
<div class="grid-item cat_4 grid_item_1">
<a href="projets/4-86-ranzay-2030.php" class="bwWrapper">
<img src="http://placehold.it/220x168" alt="Ranzay 2030">
</a>
</div>
<div class="grid-item cat_2 grid_item_1">
<a href="projets/2-80-ilot-anne-de-bretagne.php" class="bwWrapper">
<img src="http://placehold.it/220x168" alt="Ilot Anne de Bretagne">
</a>
</div>
<div class="grid-item cat_1 grid_item_1">
<a href="projets/1-84-restaurant-scolaire.php" class="bwWrapper">
<img src="http://placehold.it/220x168" alt="Restaurant scolaire">
</a>
</div>
<div class="grid-item cat_2 grid_item_2">
<a href="projets/2-81-harmonie-habitat-clisson.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Harmonie Habitat Clisson">
</a>
</div>
<div class="grid-item cat_4 grid_item_2">
<a href="projets/4-69-ilot-la-carrosserie.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Ilot La Carrosserie ">
</a>
</div>
<div class="grid-item cat_4 grid_item_2">
<a href="projets/4-55-le-clos-du-verger.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Le Clos du Verger">
</a>
</div>
<div class="grid-item cat_3 grid_item_3">
<a href="projets/3-75-pri-cap-aliment.php" class="bwWrapper">
<img src="http://placehold.it/440x168" alt="PRI Cap Aliment">
</a>
</div>
<div class="grid-item cat_2 grid_item_1">
<a href="projets/2-79-zac-de-la-fleuriaye-ii.php" class="bwWrapper">
<img src="http://placehold.it/220x168" alt="ZAC de la Fleuriaye II">
</a>
</div>
<div class="grid-item cat_5 grid_item_3">
<a href="projets/5-46-place-de-l-hotel-de-ville.php" class="bwWrapper">
<img src="http://placehold.it/440x168" alt="Place de l’Hôtel de Ville">
</a>
</div>
</div>
</div>
<!-- conteneur_centre -->
</div>
2 个答案:
答案 0 :(得分：0)
尝试使用flexbox布局。它很棒！
答案 1 :(得分：0)
在问我的问题之前，我在不同的帖子上看到过我必须使用包装，但它不起作用。
在这篇文章中，我找到了解决方案： Isotope Gallery Error: Uncaught Error No layout mode packery line 8
此布局包装模式不包含在isotope.pkgd.js中，必须单独安装。
我必须下载并安装isotope packery layout js，然后似乎没有更多的空白。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
$(document).ready(function() {
var $grid = $('.grid').imagesLoaded({
background: '.item'
}, function() {
// init Isotope after all images have loaded
$('.grid').isotope({
itemSelector: '.grid-item',
layoutMode: 'packery',
packery: {
//columnWidth: 440
}
});
});
$('.menu_projets a').click(function(e) {
e.preventDefault();
$('.menu_projets a').removeClass('submenu_active');
$(this).addClass('submenu_active');
});
$('#grid-item').click(function() {
$grid.isotope({
filter: '*'
});
});
$('#cat_1').click(function() {
$grid.isotope({
filter: '.cat_1'
});
});
$('#cat_2').click(function() {
$grid.isotope({
filter: '.cat_2'
});
});
$('#cat_3').click(function() {
$grid.isotope({
filter: '.cat_3'
});
});
$('#cat_4').click(function() {
$grid.isotope({
filter: '.cat_4'
});
});
$('#cat_5').click(function() {
$grid.isotope({
filter: '.cat_5'
});
});
});grid-item {
float: left;
/* width: 50px;
height: 50px;*/
}
.grid_item_1 {
width: 220px;
height: 168px;
}
.grid_item_2 {
width: 220px;
height: 336px;
}
.grid_item_3 {
width: 440px;
height: 168px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
<script src="https://raw.githubusercontent.com/metafizzy/isotope-packery/master/packery-mode.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js"></script>
<ul class="menu_projets filter-button-group">
<li id="grid-item"><a href="tous">tous</a>
</li>
<li id="cat_1"><a href="#">équipement</a>
</li>
<li id="cat_2"><a href="#">habitat</a>
</li>
<li id="cat_3"><a href="#">activités</a>
</li>
<li id="cat_4"><a href="#">projets urbains</a>
</li>
<li id="cat_5"><a href="#">espaces publics</a>
</li>
</ul>
<div class="container container_top">
<div class="row">
<div class="grid">
<div class="grid-item cat_1 grid_item_3">
<a href="projets/1-87-ranzay-2030.php" class="bwWrapper">
<img src="http://placehold.it/440x168" alt="Ranzay 2030">
</a>
</div>
<div class="grid-item cat_5 grid_item_3">
<a href="projets/5-73-palettes.php" class="bwWrapper">
<img src="http://placehold.it/440x168" alt="Palettes">
</a>
</div>
<div class="grid-item cat_4 grid_item_3">
<a href="projets/4-61-eco-quartier-des-lauriers.php" class="bwWrapper">
<img src="http://placehold.it/440x168" alt="Eco-quartier des Lauriers ">
</a>
</div>
<div class="grid-item cat_4 grid_item_3">
<a href="projets/4-66-ilot-ucear.php" class="bwWrapper">
<img src="http://placehold.it/440x168" alt="Ilot UCEAR">
</a>
</div>
<div class="grid-item cat_3 grid_item_1">
<a href="projets/3-32-pri-malboire.php" class="bwWrapper">
<img src="http://placehold.it/220x168" alt="PRI Malboire">
</a>
</div>
<div class="grid-item cat_3 grid_item_2">
<a href="projets/3-63-siege-vannes-agglo.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Siège Vannes Agglo">
</a>
</div>
<div class="grid-item cat_3 grid_item_1">
<a href="projets/3-64-we-45.php" class="bwWrapper">
<img src="http://placehold.it/220x168" alt="WE 45">
</a>
</div>
<div class="grid-item cat_2 grid_item_2">
<a href="projets/2-20-le-vallon-des-dervallieres.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Le Vallon des Dervallières">
</a>
</div>
<div class="grid-item cat_1 grid_item_2">
<a href="projets/1-31-service-de-restauration.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Service de restauration ">
</a>
</div>
<div class="grid-item cat_1 grid_item_2">
<a href="projets/1-34-base-nautique-de-vioreau.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Base nautique de Vioreau">
</a>
</div>
<div class="grid-item cat_1 grid_item_2">
<a href="projets/1-50-base-nautique.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Base nautique">
</a>
</div>
<div class="grid-item cat_2 grid_item_3">
<a href="projets/2-17-le-vallon-des-garettes-vd2.php" class="bwWrapper">
<img src="http://placehold.it/440x168" alt="Le Vallon des Garettes VD2">
</a>
</div>
<div class="grid-item cat_1 grid_item_2">
<a href="projets/1-29-groupe-scolaire.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Groupe scolaire ">
</a>
</div>
<div class="grid-item cat_3 grid_item_2">
<a href="projets/3-62-delegation-territoriale-du-vignoble.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Délégation territoriale du Vignoble">
</a>
</div>
<div class="grid-item cat_4 grid_item_3">
<a href="projets/4-65-parc-technologique-bas-carbone.php" class="bwWrapper">
<img src="http://placehold.it/440x168" alt="Parc technologique bas carbone ">
</a>
</div>
<div class="grid-item cat_3 grid_item_2">
<a href="projets/3-78-immeuble-de-bureaux.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Immeuble de bureaux">
</a>
</div>
<div class="grid-item cat_5 grid_item_1">
<a href="projets/5-70-restructuration-du-port-de-la-gravette.php" class="bwWrapper">
<img src="http://placehold.it/220x168" alt="Restructuration du port de la Gravette">
</a>
</div>
<div class="grid-item cat_2 grid_item_2">
<a href="projets/2-77-les-portes-de-la-seiche.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Les portes de la Seiche">
</a>
</div>
<div class="grid-item cat_3 grid_item_1">
<a href="projets/3-83-vital-parc-monteux.php" class="bwWrapper">
<img src="http://placehold.it/220x168" alt="Vital Parc Monteux">
</a>
</div>
<div class="grid-item cat_2 grid_item_2">
<a href="projets/2-88-les-maquisards.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Les Maquisards">
</a>
</div>
<div class="grid-item cat_2 grid_item_1">
<a href="projets/2-85-logements-metairies.php" class="bwWrapper">
<img src="http://placehold.it/220x168" alt="Logements Métairies">
</a>
</div>
<div class="grid-item cat_2 grid_item_2">
<a href="projets/2-18-le-vallon-d-herme.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Le Vallon d'Hermé">
</a>
</div>
<div class="grid-item cat_4 grid_item_2">
<a href="projets/4-53-les-jardins-de-gaia.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Les Jardins de Gaïa">
</a>
</div>
<div class="grid-item cat_5 grid_item_2">
<a href="projets/5-72-restructuration-des-espaces-portuaires.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Restructuration des espaces portuaires">
</a>
</div>
<div class="grid-item cat_1 grid_item_1">
<a href="projets/1-57-realisation-d-un-centre-touristique.php" class="bwWrapper">
<img src="http://placehold.it/220x168" alt="Réalisation d'un centre touristique ">
</a>
</div>
<div class="grid-item cat_4 grid_item_2">
<a href="projets/4-48-amenagement-du-coeur-de-bourg.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Aménagement du coeur de bourg ">
</a>
</div>
<div class="grid-item cat_2 grid_item_1">
<a href="projets/2-24-les-nympheas.php" class="bwWrapper">
<img src="http://placehold.it/220x168" alt="Les Nymphéas">
</a>
</div>
<div class="grid-item cat_4 grid_item_1">
<a href="projets/4-51-reconversion-du-site-de-l-usine-gep.php" class="bwWrapper">
<img src="http://placehold.it/220x168" alt="Reconversion du site de l’usine GEP ">
</a>
</div>
<div class="grid-item cat_4 grid_item_2">
<a href="projets/4-52-le-clos-de-la-rouliere.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Le Clos de la Roulière ">
</a>
</div>
<div class="grid-item cat_3 grid_item_1">
<a href="projets/3-82-mediacampus.php" class="bwWrapper">
<img src="http://placehold.it/220x168" alt="Médiacampus">
</a>
</div>
<div class="grid-item cat_1 grid_item_2">
<a href="projets/1-33-restaurant-scolaire.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Restaurant scolaire ">
</a>
</div>
<div class="grid-item cat_3 grid_item_2">
<a href="projets/3-36-carre-de-coueron.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Carré de Couëron">
</a>
</div>
<div class="grid-item cat_1 grid_item_3">
<a href="projets/1-28-maison-des-associations.php" class="bwWrapper">
<img src="http://placehold.it/440x168" alt="Maison des associations">
</a>
</div>
<div class="grid-item cat_1 grid_item_2">
<a href="projets/1-47-restaurant-scolaire.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Restaurant scolaire ">
</a>
</div>
<div class="grid-item cat_2 grid_item_2">
<a href="projets/2-13-les-rainettes.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Les Rainettes">
</a>
</div>
<div class="grid-item cat_2 grid_item_1">
<a href="projets/2-25-maison-d.php" class="bwWrapper">
<img src="http://placehold.it/220x168" alt="Maison D">
</a>
</div>
<div class="grid-item cat_3 grid_item_1">
<a href="projets/3-30-le-medley.php" class="bwWrapper">
<img src="http://placehold.it/220x168" alt="Le Medley">
</a>
</div>
<div class="grid-item cat_5 grid_item_2">
<a href="projets/5-43-reamenagement-de-la-rd-857.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Réaménagement de la RD 857">
</a>
</div>
<div class="grid-item cat_5 grid_item_3">
<a href="projets/5-44-reamenagement-du-front-de-mer.php" class="bwWrapper">
<img src="http://placehold.it/440x168" alt="Réaménagement du front de mer">
</a>
</div>
<div class="grid-item cat_5 grid_item_3">
<a href="projets/5-49-rue-du-gue.php" class="bwWrapper">
<img src="http://placehold.it/440x168" alt="Rue du Gué">
</a>
</div>
<div class="grid-item cat_5 grid_item_1">
<a href="projets/5-41-amenagement-de-la-rue-de-rennes.php" class="bwWrapper">
<img src="http://placehold.it/220x168" alt="Aménagement de la rue de Rennes">
</a>
</div>
<div class="grid-item cat_5 grid_item_1">
<a href="projets/5-45-reamenagement-du-front-de-mer.php" class="bwWrapper">
<img src="http://placehold.it/220x168" alt="Réaménagement du front de mer ">
</a>
</div>
<div class="grid-item cat_2 grid_item_2">
<a href="projets/2-23-operation-centre-ville.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Opération Centre ville">
</a>
</div>
<div class="grid-item cat_1 grid_item_2">
<a href="projets/1-76-mediatheque-associative.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Médiathèque associative">
</a>
</div>
<div class="grid-item cat_2 grid_item_3">
<a href="projets/2-19-ker-pradenn.php" class="bwWrapper">
<img src="http://placehold.it/440x168" alt="Ker Pradenn">
</a>
</div>
<div class="grid-item cat_1 grid_item_2">
<a href="projets/1-54-restructuration-des-espaces-portuaires.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Restructuration des espaces portuaires">
</a>
</div>
<div class="grid-item cat_2 grid_item_1">
<a href="projets/2-22-villavenir-atlantique.php" class="bwWrapper">
<img src="http://placehold.it/220x168" alt="Villavenir + Atlantique">
</a>
</div>
<div class="grid-item cat_1 grid_item_3">
<a href="projets/1-68-eglise-st-vincent-de-paul.php" class="bwWrapper">
<img src="http://placehold.it/440x168" alt="Eglise St Vincent de Paul ">
</a>
</div>
<div class="grid-item cat_3 grid_item_3">
<a href="projets/3-74-bureaux-mc2.php" class="bwWrapper">
<img src="http://placehold.it/440x168" alt="Bureaux MC2">
</a>
</div>
<div class="grid-item cat_4 grid_item_1">
<a href="projets/4-86-ranzay-2030.php" class="bwWrapper">
<img src="http://placehold.it/220x168" alt="Ranzay 2030">
</a>
</div>
<div class="grid-item cat_2 grid_item_1">
<a href="projets/2-80-ilot-anne-de-bretagne.php" class="bwWrapper">
<img src="http://placehold.it/220x168" alt="Ilot Anne de Bretagne">
</a>
</div>
<div class="grid-item cat_1 grid_item_1">
<a href="projets/1-84-restaurant-scolaire.php" class="bwWrapper">
<img src="http://placehold.it/220x168" alt="Restaurant scolaire">
</a>
</div>
<div class="grid-item cat_2 grid_item_2">
<a href="projets/2-81-harmonie-habitat-clisson.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Harmonie Habitat Clisson">
</a>
</div>
<div class="grid-item cat_4 grid_item_2">
<a href="projets/4-69-ilot-la-carrosserie.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Ilot La Carrosserie ">
</a>
</div>
<div class="grid-item cat_4 grid_item_2">
<a href="projets/4-55-le-clos-du-verger.php" class="bwWrapper">
<img src="http://placehold.it/220x336" alt="Le Clos du Verger">
</a>
</div>
<div class="grid-item cat_3 grid_item_3">
<a href="projets/3-75-pri-cap-aliment.php" class="bwWrapper">
<img src="http://placehold.it/440x168" alt="PRI Cap Aliment">
</a>
</div>
<div class="grid-item cat_2 grid_item_1">
<a href="projets/2-79-zac-de-la-fleuriaye-ii.php" class="bwWrapper">
<img src="http://placehold.it/220x168" alt="ZAC de la Fleuriaye II">
</a>
</div>
<div class="grid-item cat_5 grid_item_3">
<a href="projets/5-46-place-de-l-hotel-de-ville.php" class="bwWrapper">
<img src="http://placehold.it/440x168" alt="Place de l’Hôtel de Ville">
</a>
</div>
</div>
</div>
<!-- conteneur_centre -->
</div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？