In that case, you would create a container-resource for each category.
You would have an outer getResources - snippet, which lists the categories.
Something like that in your listing-template:
[[getResources?
&parents=`0`
&tpl=`tplCategory`
]]
create a chunk with name 'tplCategory' and code like that, with another getResources-snippet in it, to list the buildings:
<section class="category" id="[[+alias]]">
<div class="inner">
<!--<p id="page-intro"><a href="#religious">Religious</a> | <a href="#domestic">Domestic</a> | <a href="#commercial">Commercial</a> | <a href="#military">Military</a></p>-->
<a id="[[+alias]]-section"></a>
<h3>[[+pagetitle]]<span class="additional-info"> BUILDINGS</span></h3>
[[getResources?
&parents=`[[+id]]`
&tpl=`tplBuilding`
]]
<div class="type-triangle-down">
<a href="#domestic-section"><img src="images/triangle-down-black.png" alt="Go to Domestic Buildings" /></a>
</div>
</div><!--inner relgious category ends-->
</section><!--religious category ends-->
your chunk 'tplBuilding'
<!--ENTRY-->
<div class="building-category-entry">
<div class="category-entry-name">
<h4><a href="[[~[[+id]]]]">[[+pagetitle]]</a></h4>
<p class="address">[[+tv.address]]</p>
<p class="what-and-when">
[[+introtext]]
</p>
</div><!--category entry name ends-->
<div class="thumbnail-container">
[[getImageList.... or whatever images-solution you would prefer]]
</div><!--thumbnail container ends-->
</div><!--entry ends-->