I'm trying to use the infinite scroll and masonry to make a 2 - column tumblr theme. My issue is that it seems the code isn't triggering; neither the masonry nor infinite scrolling is working. I've tried moving the script to different places in the code and that didn't work. I took out the irrelevant parts of my code, hopefully someone else can help me understand it.
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://unpkg.com/infinite-scroll@5/dist/infinite-scroll.pkgd.min.js"></script>
<style type="text/css">
.main {
margin: auto;
margin-top: 30px;
width: 1000px;
}
.posts {
margin-bottom: 30px;
width: 400px;
float: left;
background: white;
}
#content {
margin-top: 80px;
width: 1000px;
}
</style>
</head>
<body onload="document.body.style.opacity='1'">
div class="pag">
{block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">previous</a> ·{/block:PreviousPage} {block:NextPage}<a href="{NextPage}" id="next">next</a>{/block:NextPage}{/block:Pagination}
</div>
<div class="main">
<div id="content">
{block:Posts}
<div class="posts">
{block:IndexPage}
<div class="pagination">
{block:PreviousPage}
<a href="{PreviousPage}">« Previous</a>
{/block:PreviousPage}
{block:NextPage}
<a href="{NextPage}">Next »</a>
{/block:NextPage}
</div>
{/block:IndexPage}
</div>
<script>
var $container = $('#content').masonry({
// options
itemSelector: '.posts',
columnWidth: 400
});
// get masonry instance
var msnry = $container.data('masonry');
$('#container').infiniteScroll({
// options
path: '.pag #next',
append: '.posts',
history: false,
outlayer: msnry,
});
</script>
</body>
I'm trying to use the infinite scroll and masonry to make a 2 - column tumblr theme. My issue is that it seems the code isn't triggering; neither the masonry nor infinite scrolling is working. I've tried moving the script to different places in the code and that didn't work. I took out the irrelevant parts of my code, hopefully someone else can help me understand it.